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标签所超越。有关详细信息，请参阅以下链接：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我从未意识到第一类没有区分数据属性！你可以这样做，如果它显示为第一项，或者如果没有data-result =无效的任何P标签，它将获得它。

p[data-result="INVALID"]:first-of-type, p:not([data-result="INVALID"]) + p[data-result="INVALID"]{
  styles here
}

选择具有数据属性

2 个答案: