如何使用包含冒号的属性名称在DOM中选择元素？

Question

我正在使用Chartist库，它正在为名为ct:value的DOM的一些元素添加一个属性。例如：

<line y1="122.6875" y2="122.6875" x1="242.33333333333334" x2="262.06666666666666" class="ct-bar" ct:value="1"></line>

我想根据ct:value的值来做一些选择性样式。我如何使用CSS选择器选择它？

Answer 1

您将使用attribute selector。但是，由于冒号是CSS中的保留字符（对于伪类等），因此需要对其进行转义。在CSS中，这是通过反斜杠完成的：\。

示例

＆＃13;

＆＃13;

*{box-sizing:border-box;font-family:sans-serif;}
p{
    border:1px solid #000;
    padding:5px;
}
[ct\:value]{
    background:#ccc;
}
[ct\:value="1"]{
    color:red;
}
[ct\:value="2"]{
    color:green;
}
[ct\:value="3"]{
    color:blue;
}

＆＃13;

<p>Zero</p>
<p ct:value="1">One</p>
<p ct:value="2">Two</p>
<p ct:value="3">Three</p>

＆＃13;

＆＃13;

＆＃13;