我正在尝试学习如何选择<li>
a的最后三个元素,以<ul>
使其(基于一个)索引大于3的最大倍数,而3的最大倍数小于列表元素的数量。
因此,例如:
<li>
元素<ul>
,我希望元素1-6具有font-weight:normal,元素7,8和9具有font-weight:bold。<li>
元素<ul>
,我希望元素1-6具有font-weight:normal,元素7和8具有font-weight:bold。<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;}
我还要怎么做?
我想你要
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句