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

FIXED * *

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

Answer 2

将CSS选择器更改为：

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

Answer 3

首先，我想说明一点，使用 ~~topColor~~ 不是有效属性，因此请考虑使用data-前缀作为自定义属性。

你需要引用属性值，为什么会这样？

来自W3C

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

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

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

Demo

element [attr = value]选择器不起作用

3 个答案: