如何使用包含冒号的属性名称 select 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 的值做一些 select 的样式设置。我如何 select 使用 CSS select 或？

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>

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

How do I select an element in the DOM using an attribute name that contains a colon?

css

css-selectors