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>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.