CSS [attr~="value"]选择器,匹配属性值包含value元素
[attr~="value"]选择器
CSS属性选择器中,[attr~="value"]可以根据元素属性的值包含指定的value来匹配查找HTML元素。语法如下:
selector[attr~="value"]{样式设置}
提示:selector为CSS中的选择器,匹配查找到某一类元素的元素集合,然后再通过[attr~="value"]来匹配查找该元素集合中的某一个属性包含value值的元素。
提示:“~”符号在键盘上z的旁边(mac的键盘,如果是window可能在数字1的旁边),输入的时候将输入法切换为英文的模式。
[attr~="value"]选择器实例代码,及在线编辑器
下方实例将属性值包含zh-CN的段落的字体颜色设置为skyblue:
<p lang='zh-CN'>段落一</p>
<p lang='en'>p二</p>
<p lang='zh-CN'>段落三</p>
<p lang='en'>p四</p>
<p lang='en'>p五</p>
<p lang='zh-CN'>段落一</p>
<style>
p[lang~="zh-CN"]{color:skyblue;}
</style>