html - 元素 [attr=value] 选择器不起作用

Question

当尝试使用 topColor 的自定义属性时，我无法让 2 个类使用 2 个伪元素。代码如下。

HTML

<li class="nav-item" topColor="D24726">Hello</li>
<li class="nav-item" topColor="008A00">Hello</li>

CSS

.nav-item:hover[topColor=D24726]{border-top: 2px solid #D24726;}
.nav-item:hover[topColor=008A00]{border-top: 2px solid #008A00;}

我也试过这个:

.nav-item[topColor=D24726]:hover{border-top: 2px solid #D24726;}
.nav-item[topColor=008A00]:hover{border-top: 2px solid #008A00;}

当我将鼠标悬停在顶部颜色为 D24726 的第一个导航项上时，它起作用了。但是，它不适用于第二项。有任何想法吗？

此外，如果可能的话，我希望它在 CSS 而不是 jQuery 中完成，除非有必要

Answer 1

将您的 CSS 选择器更改为:

li.nav-item[topColor='D24726']:hover {
    border-top: 2px solid #D24726;
}
li.nav-item[topColor='008A00']:hover {
    border-top: 2px solid #008A00;
}