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时添加其他类名）。

：not（：empty）：first-of-type不起作用？

1 个答案: