css - 如何使用包含冒号的属性名称选择 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 中，这是通过反斜杠完成的:\。

示例

*{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;
}

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