CSS 最后三个孩子只有在条件

Question

我正在尝试学习如何<li>在 a 的最后三个元素中进行选择<ul>，使得它们的（基于 1 的）索引大于 3 的最大倍数，后者小于列表元素的数量。

例如：

• 如果 中有 9 个<li>元素<ul>，我希望元素 1-6 具有 font-weight:normal 并且元素 7,8 和 9 具有 font-weight:bold。
• 如果 中有 8 个<li>元素<ul>，我希望元素 1-6 具有 font-weight:normal，元素 7 和 8 具有 font-weight:bold。
• 如果 中有 7 个<li>元素<ul>，我希望元素 1-6 具有 font-weight:normal 并且元素 7 具有 font-weight:bold。

我尝试了这个 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;
}

也就是说，它选择最后 3 个索引 mod 3 为 1 的元素。然后它还添加以下同级元素（如果有）。

/* 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;
}

也就是说，它获取最后 4 个索引为 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+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;
}