:not(:empty):first-of-type 不起作用？

Question

我想在第一个具有 类的非空元素之前显示文本error。我用过.error:not(:empty):first-of-type::before但是没用。我缺少什么？

.error:not(:empty):first-of-type::before {
    content: attr(seq);
    display: block;
    background-color:red;
}

不起作用：

<div>
    <p class="error" seq="Error #1" ></p>
    <p class="error" seq="Error #2">2</p>
    <p class="error" seq="Error #3">3</p>
    <p class="error" seq="Error #4"></p>
    <div><b> Some text here  </b>
    <p></p>
</div>

工作正常：

 <div>
    <p class="error" seq="Error #1" >1</p>
    <p class="error" seq="Error #2">2</p>
    <p class="error" seq="Error #3">3</p>
    <p class="error" seq="Error #4"></p>
    <div><b> Some text here  </b>
    <p></p>
</div>

https://jsfiddle.net/71L7nvoy/

PS：我也尝试过:firts-child。也没起作用。

Answer 1

:first-of-type意思是“类型的第一个元素（也称为标签名称）”而不是“与选择器的其余部分匹配的第一个元素”。

CSS 选择器无法提供描述您想要的条件的方法。您需要采取其他方法（例如，在生成 HTML 时添加额外的类名）。