CSS仅在条件允许的情况下最后三个孩子

约翰

我正在尝试学习如何选择<li>a的最后三个元素,以<ul>使其(基于一个)索引大于3的最大倍数,而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;}

我还要怎么做?

i

我想你要

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

如何在没有$ unwind的情况下加入三个集合并根据条件获取嵌套结果?

来自分类Dev

是否有一个matplotlib.pyplot代码可以在没有'axes.grid'代码的情况下允许三个子图?

来自分类Dev

如何在不倾斜三个js的情况下向上移动相机

来自分类Dev

如何在条件链接到第三个表的情况下联接两个表

来自分类Mysql

仅在满足一个条件的情况下,ON DUPLICATE KEY UPDATE的Terser语法?

来自分类Dev

在考虑事务的情况下如何使用prepare语句将数据插入MySQLi中的三个不同表

来自分类Dev

如何在不使用python每三个字符的情况下打印字符串?

来自分类Dev

Firebase回收器视图仅在第三个孩子上显示错误

来自分类Python

仅在满足条件的情况下添加到dict

来自分类Dev

仅在满足条件的情况下运行SQL查询

来自分类Dev

仅在满足条件的情况下如何更新文档?

来自分类Dev

仅在满足条件的情况下才执行CHECK语句

来自分类Dev

仅在具有两个基类的情况下,才允许在模板参数中使用类类型

来自分类Dev

您如何在不快速使用第三个变量的情况下交换任何类型的两个变量?

来自分类Dev

使用htaccess,仅在URL包含查询字符串的情况下才允许访问网站,但允许网站资源(CSS,JS等)工作吗?

来自分类Dev

循环从0到100的数字,并使用递归在没有模数功能的情况下每三个数字打印一次

来自分类Dev

Pandas-在分隔符的最后一个实例之后的拆分列,仅在分隔符后面有2个数字的情况下

来自分类Dev

三个条件的onClick条件渲染

来自分类Dev

仅在文件公开共享的情况下才允许下载Google文档

来自分类Dev

在不使用JavaScript的情况下使用第n个孩子时是否可以访问n?

来自分类Dev

在不知道钥匙的情况下从火力中移除一个孩子

来自分类Dev

仅在存在的情况下包括

来自分类Java

如何仅在Java中具有特定条件的情况下才能唤醒睡眠线程?

来自分类Dev

XML XPath-仅在满足子条件的情况下选择父文本

来自分类Dev

v-on单击,仅在满足条件的情况下添加处理程序

来自分类Dev

Laravel Eloquent-仅在“ with”中的“ where”条件为true的情况下获取关系元素

来自分类Mysql

MySQL仅在不存在但有更多条件的情况下插入

来自分类Dev

仅在满足某些条件的情况下才尝试投射列

来自分类Dev

如何仅在满足特定条件的情况下运行后台任务?

TOP 榜单

热门标签

归档