CSS仅在条件允许的情况下才能持续三个子级。

Question

我正在学习如何在<li>的最后三个元素中选择<ul>，以便它们的(基于一个的)索引大于3的最大倍数，这比列表元素的数量要小。

例如：

• 如果在<li>中有9个<ul>元素，我希望元素1-6具有字体大小:法线，元素7、8和9具有字体权重:粗体。
• 如果在<li>中有8个<ul>元素，我希望元素1-6具有字体权重:normal，元素7和8具有字体大小:粗体。
• 如果在<li>中有7个<ul>元素，我希望元素1-6具有字体权重:normal，元素7具有字体权重:粗体。

我尝试了这个CSS选择器，但它似乎让一切变得大胆起来：

li:nth-last-child(1n+0),
li:nth-last-child(2n+0),
li:nth-last-child(3n+0) {font-weight:bold;}

不然我该怎么做？

Answer 1

我想你想

li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+3):nth-child(3n+1) ~ * {
   font-weight: bold;
}

也就是说，它从索引mod 3为1的最后3个元素中选择元素，然后添加以下兄弟姐妹(如果有的话)。

​

/* Tests */
document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"
for (var i=0; i<10; ++i) {
  var ul = document.body.appendChild(document.createElement('ul'));
  for (var j=0; j<=i; ++j) {
    var li = ul.appendChild(document.createElement('li'));
    li.appendChild(document.createTextNode(j+1+'-th item '));
  }
  for (var j=0; j<=i; ++j) {
    var li = ul.children[j];
    var isSelected = getComputedStyle(li).fontWeight === '700';
    if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";
  }
}

li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+3):nth-child(3n+1) ~ * {
   font-weight: bold;
}

​

如果有三个以上的元素，您可以将其简化为

li:nth-last-child(-n+4):nth-child(3n) ~ * {
   font-weight: bold;
}

也就是说，它从索引为3的最后4个中获取元素，然后选择以下兄弟姐妹。

​

/* Tests */
document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"
for (var i=0; i<10; ++i) {
  var ul = document.body.appendChild(document.createElement('ul'));
  for (var j=0; j<=i; ++j) {
    var li = ul.appendChild(document.createElement('li'));
    li.appendChild(document.createTextNode(j+1+'-th item '));
  }
  for (var j=0; j<=i; ++j) {
    var li = ul.children[j];
    var isSelected = getComputedStyle(li).fontWeight === '700';
    if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";
  }
}

li:nth-last-child(-n+4):nth-child(3n) ~ * {
  font-weight:bold;
}

​

如果你不喜欢通用选择器，

li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+2):nth-child(3n+2),
li:nth-last-child(-n+1):nth-child(3n+3)

​

/* Tests */
document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"
for (var i=0; i<10; ++i) {
  var ul = document.body.appendChild(document.createElement('ul'));
  for (var j=0; j<=i; ++j) {
    var li = ul.appendChild(document.createElement('li'));
    li.appendChild(document.createTextNode(j+1+'-th item '));
  }
  for (var j=0; j<=i; ++j) {
    var li = ul.children[j];
    var isSelected = getComputedStyle(li).fontWeight === '700';
    if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";
  }
}

li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+2):nth-child(3n+2),
li:nth-last-child(-n+1):nth-child(3n+3) {
  font-weight: bold;
}

​

Answer 2

与其在n上使用:nth-last-child符号，不如在:nth-child上使用一个数字。请注意，这两种解决方案的技术目标都是前6项，以覆盖应用于其余列表项的样式。

li{
    font-weight:bold;
}
li:nth-child(1),
li:nth-child(2),
li:nth-child(3),
li:nth-child(4),
li:nth-child(5),
li:nth-child(6){
    font-weight:normal;
}

JSFIDDLE

或者，如果您想使用n表示法，您可以使用

li{
    font-weight:bold;
}
li:nth-child(-n+6){
    font-weight:normal;
}

选择前6个元素

JSFIDDLE

如果您确实希望在最后的6之后选择所有元素，您将使用：

li:nth-child(n+6) ~ *{
    font-weight:bold;
}

JSFIDDLE

Answer 3

使用li:nth-last-child(-n+3)

这将给出最后3个元素，即使列表是动态的。无论列表中有10个、20个或30个元素，它总是针对最后3个元素。