如何在CSS中通过带命名空间的属性及值定位HTML元素？

我需要通过ct:value=" "属性值定位HTML元素，修改圆形的颜色。原本使用y1属性的CSS定位，但y1值不固定，无法生效。ct:value的值固定在1到5之间，因此想通过它来定位元素修改颜色。SVG代码是动态生成的，无法修改HTML文件。

原无效定位CSS #

.ct-point[y1="140"]{
  background-color: #ff0000;
}

尝试过的无效写法 #

.ct-point[(ct:value)="4"]{
  background-color: yellow;
}
.ct-point[ct:value="2"]{
  background-color: pink;
}

解决方案 #

CSS中匹配带冒号的自定义属性时，需要用反斜杠\转义冒号，才能正确识别这类带命名空间的属性。

正确的CSS代码 #

.ct-point {
    background-color: #000000;
    height: 20px;
    width: 20px;
    display: inline-block;
    border-radius: 100%;
}
/* 仅作对比的原y1定位示例 */
.ct-point[y1="140"]{
      background-color: #ff0000;
}
/* 转义冒号后匹配ct:value属性 */
.ct-point[ct\:value="4"]{
      background-color: yellow;
}
.ct-point[ct\:value="2"]{
      background-color: pink;
}
/* 可补充其他value值的样式 */
.ct-point[ct\:value="1"]{
      background-color: #ccc;
}
.ct-point[ct\:value="3"]{
      background-color: orange;
}
.ct-point[ct\:value="5"]{
      background-color: green;
}

示例HTML片段 #

<line x1="120.29910714285714" y1="15" x2="120.30910714285714" y2="15" class="ct-point" ct:value="5" ct:meta="Feel brilliant today."></line>
<line x1="190.59821428571428" y1="140" x2="190.60821428571427" y2="140" class="ct-point" ct:value="3" ct:meta="Feeling ok."></line>
<line x1="471.79464285714283" y1="202.5" x2="471.8046428571428" y2="202.5" class="ct-point" ct:value="1" ct:meta="bad..."></line>
<line x1="260.89732142857144" y1="77.5" x2="260.90732142857144" y2="77.5" class="ct-point" ct:value="4" ct:meta="pretty"></line>
<line x1="331.19642857142856" y1="15" x2="331.20642857142855" y2="15" class="ct-point" ct:value="5" ct:meta="Today feel brilliant because it&#039;s morning time!"></line>
<line x1="401.49553571428567" y1="77.5" x2="401.50553571428566" y2="77.5" class="ct-point" ct:value="4" ct:meta="Pretty good."></line>
<line x1="471.79464285714283" y1="202.5" x2="471.8046428571428" y2="202.5" class="ct-point" ct:value="2" ct:meta="great..."></line>

内容的提问来源于stack exchange，提问作者Jignesh Panchal