Question

我以为这很简单，但显然我无法将其包裹住。

相关HTML：

<ul>
  <li data-year="2020"> <span>Year 2020 List 1<span> </li>
  <li data-year="2020"> <span>Year 2020 List 2</span> </li>
  <li data-year="2021"> <span>Year 2021 List 1 </span> </li>
  <li data-year="2021"> <span>Year 2021 List 2</span> </li>
  <li data-year="2021"> <span>Year 2021 List 3</span> </li>
</ul>

HTML的CSS：

[data-year="2020"]:first-of-type {
  color: red;
}

[data-year="2021"]:first-of-type {
  color: green;
}

我要实现的目的是将颜色应用于具有span和date-year=2020属性的元素的第一个date-year=2021。即“ 2020年列表1”和“ 2021年列表1”。

从我对MDN的简要了解中，first-of-type仅适用于目标选择器的任何第一个子类型，这就是我认为在上面的代码中应该发生的情况，但是我只看到“ 2020 List 1”（带有应用的颜色），但没有“ 2021 List 1”。

我开始怀疑，是否有可能完全在CSS中做我想做的事情而无需对我的HTML结构进行重大修改。

https://jsbin.com/dijerihako/edit?html,css,output

编辑：从发布的related link起，看来还无法用CSS来完成我想做的事情。上述链接确实发布了解决方法

不幸的是，没有类似的：first-of-class伪类用于匹配给定类的第一个子元素。我和Lea Verou为此（虽然是完全独立的）提出的一种解决方法是，首先将所需的样式应用于该类的所有元素

Answer 1

因为类型是标记类型（li）。并且您的li中只有第一个ul。

将选择器视为需要满足以下条件的条件：目标对象必须是父对象中的同类对象，同时它的数据年值必须等于XXXX。

只需使用JavaScript或添加CSS类即可。：）

定位同一父级中特定元素的第一个孩子

1 个答案: