<分区>
标签 html css css-selectors
<分区>
我想在第一个具有 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。也没用。
最佳答案
:first-of-type 表示“该类型的第一个元素(又名标签名称)”而不是“与选择器其余部分匹配的第一个元素”。
CSS 选择器无法描述您想要的条件。您需要采取一些其他方法(例如，在生成 HTML 时添加一个额外的类名)。
关于html - :not(:empty):first-of-type doesn't work?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45276206/
相关文章：
html - Jquery Mobile NavBar 回流
javascript - 单击按钮执行 2 个操作 : file download & signup
javascript - 使用 Javascript/html 网页上的视频在设定的时间后自动播放
iphone - 是否可以创建、打包并成功提交 HTML5 应用程序到应用程序商店？
Python、Selenium 尝试通过类 xpath 定位图像
css - 如何在不知道 CSS 元素的情况下选择第 n 个元素？
HTML 定位 : Postion two objects relative to a third object without disrupting the flow