CSS | [属性|=值] 选择器

CSS | [属性|=值] 选择器用于选取指定属性等于给定值或属性值以指定值后接短横线的所有元素。

语法如下：

[属性|=值]

其中，属性是元素的属性名称，值是属性的值。

例如：

/* 选取class属性值为button 或以button-开头的元素 */
[class|=button] {
  background-color: yellow;
}

上述样式会选取class属性值为button或以button-开头的元素，并将其背景颜色设置为黄色。

此外，如果值为空字符串，则只匹配属性被赋值但值为空的元素。

例如：

/* 选取class属性值为img或以img-开头的元素或class属性为空的元素 */
[class|=img], [class=''] {
  border: 1px solid black;
}

上述样式会选取class属性值为img或以img-开头的元素或class属性为空的元素，并将其边框设置为1像素的黑色实线。

需要注意的是，此选择器只匹配指定属性名的值，不会匹配元素的子元素中的属性。

更多示例请参考以下代码片段：

/* 选取class属性值为box或以box-开头的元素，并将字体颜色设置为红色 */
[class|=box] {
  color: red;
}

/* 选取class属性值为img或以img-开头的元素，并将宽度设置为50像素 */
[class|=img] {
  width: 50px;
}

/* 选取title属性值为hello或以hello-开头的元素 */
[title|=hello] {
  border: 2px dashed blue;
}

以上就是CSS | [属性|=值] 选择器的介绍和用法，希望能对你理解并使用此选择器有所帮助。