选择具有data属性的第一个元素

Question

我想使用css 选择<p>包含属性的段落的第一个匹配项data-result="INVALID".

我试过这个小脚本没有任何成功.没有选择任何元素.

我仅限于此解决方案的css(没有jQuery).这个问题有什么解决方案吗？

p[data-result="INVALID"]:first-of-type {
  color: red;
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>


<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

Answer 1

不幸的是,CSS没有过滤器选择器,类似于p[data-result="INVALID"]:first或p[data-result="INVALID"]:first-with-attribute.您可以通过首先将所有相应项目设置为红色来模仿您想要的行为,然后将所有相同项目的下一个兄弟项目反转为黑色.

我还想指出我对你的代码有两个问题:使用大写的类名,ID,属性,以及你有什么困惑.要么全部使用小写,要么全部使用大写.有些人(特别是后端开发人员)喜欢使用驼峰式外壳,但我不喜欢它 - 这是个人的.但是为了统一性和可管理性,建议坚持一个惯例,不要开始混合.其次,b标签可能不是您想要的标签.它曾经是一个非常方便的标签,但strong在很多方面都被标签所超越.有关详细信息,请参阅以下链接

• MDN
• W3
• HTML5医生

p[data-result="INVALID"] {
  color: red
}

p[data-result="INVALID"] ~ p[data-result="INVALID"] {
    color: black;
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>