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

前端之家收集整理的这篇文章主要介绍了html – :[attribute = value]的nth-child(2n)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个包含行的列表,每个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报道的那样,所以停止等待并开始想出另一种方法:/

原文链接:https://www.f2er.com/html/426808.html

猜你在找的HTML相关文章