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

CSS | [属性~=值] 选择器是一种CSS选择器，用于选择具有指定属性且包含特定值的元素。其中，"~="表示包含，不是精确匹配。

语法

[attribute~=value] {
  /* styles */
}

例子

HTML代码

<ul>
  <li class="foo">foo</li>
  <li class="foo bar">foo bar</li>
  <li class="foo bar baz">foo bar baz</li>
</ul>

CSS代码

li[class~="foo"] {
  background-color: yellow;
}

li[class~="bar"] {
  color: blue;
}

li[class~="baz"] {
  font-weight: bold;
}

渲染结果

• li元素中class属性中包含"foo"的元素将有黄色背景色。
• li元素中class属性中包含"bar"的元素将有蓝色字体颜色。
• li元素中class属性中包含"baz"的元素将有粗体字体。

注意事项

• 当选择器中属性名和值被拼写错误时，元素将不会被选中。
• 该选择器与通配符选择器（*）和后代选择器（空格）结合使用时，可能会提高选择器的性能。
• 该选择器不能用于选择布尔属性（如“disabled”）。