html – ：[attribute = value]的nth-child(2n)

发布时间：2020-12-14 23:19:06 所属栏目：资源来源：网络整理

导读：我有一个包含行的列表,每个li都有一个属性data-status,其值可以是1-5：我希望数据状态为1的每个奇数li都有不同的背景, 在CSS中可以做到吗？最佳答案如果问题是如何选择具有特定属性的所有奇数元素？那么有可能在其他答案中解释如何 li[data-status="1"]:n

我有一个包含行的列表,每个li都有一个属性data-status,其值可以是1-5：


我希望数据状态为1的每个奇数li都有不同的背景,
在CSS中可以做到吗？


最佳答案
如果问题是如何选择具有特定属性的所有奇数元素？那么有可能在其他答案中解释如何

li[data-status="1"]:nth-child(2n+1) {
   background: #f00;
}

或以更简单的方式：

li[data-status="1"]:nth-child(odd) {
   background: #f00;
}

看看this good article关于nth-child是如何工作的.
相反,如果问题是如何选择具有特定属性的所有元素,然后只选择该子列表的奇数？好吧,这对于CSS来说还不可能,但它将使用CSS Selectors Level 4,如explained here,使用nth-match()伪类：

:nth-match(An+B of 

在你的情况下将是

li:nth-match(2n+1 of [data-status="1"])

要么

li:nth-match(odd of [data-status="1"])

让我们等一下…… CSS4即将到来！ ：P
编辑：正如Michael_B,this feature has been stripped by CSS4 specifications报道的那样,所以停止等待并开始想出另一种方法：/

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!