元素[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;
}

Answer 2

固定 *

*

在属性值周围添加了引号，一切正常

Answer 3

首先，我想在这里阐明一下，使用 topColor 不是一个有效的属性，因此请考虑data-自定义属性使用前缀。

您将需要在属性值周围引用，为什么会这样？

从 W3C

在 CSS 中，标识符（包括元素名称、类和 ID 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 （-） 和下划线 (_);它们不能以数字、两个连字符或后跟的连字符开头 按数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如 标识符"B&W？"可以写成"B\&W\？"或"B\26 W\3F"。

因此，您的

第一个选择器将起作用，因为您的属性值不以数字开头D24726即第二个将失败，因为它以数字开头，即008A00因此您将需要引号为第二个而不是第一个。

因此，最好在值周围使用引号，因为即使使用任何特殊字符（如 - / & 等），您的选择器也会失败。

演示