Question

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

例如：

如果<li>中有9个<ul>元素，我希望元素1-6的font-weight：normal和元素7,8和9的font-weight：bold。
如果<li>中有8个<ul>元素，我希望元素1-6具有font-weight：normal，而元素7和8具有font-weight：bold。
如果<li>中有7 <ul>个元素，我希望元素1-6的font-weight：normal和element 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;
}

也就是说，它选择索引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;
}

也就是说，它获取最后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;
}

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个为目标

只有条件

3 个答案: