属性选择器
存在和值属性选择器
html结构
<div id="wrap">
<div name="zhangsan">1</div>
<div name="li luo">2</div>
<div name="li">3</div>
</div>
[attr]
:该选择器选择包含attr属性的所有元素,无论attr的值是什么
div[name]{border: 1px solid blueviolet;} /*选中的是所有div*/
[attr = val]
:该选择器仅
选择attr属性被赋值val的所有元素
div[name = "li"]{border: 1px solid coral;} /*选中的是2,3号div*/
[attr ~= val]
:表示带有以attr命名的属性的元素,并且该属性是以一个空格作为分割的值列表,其中至少一个为val
div[name ~= "luo"]{border: 1px solid coral;} /*选中的是2号div*/
子串值属性选择器
html结构
<div id="wrap">
<div name="luo-zhangsan">1</div>
<div name="li luo">2</div>
<div name="luo-li">3</div>
<div name="luoliluo">4</div>
</div>
[attr |= val]
:选择的是attr属性的值是val(包括val)或者以val-开头的元素
div[name |= "luo"]{border: 1px solid coral;} /*匹配的只有1,3号元素*/
[attr ^= val]
:选择的是attr属性的值以val开头(包括val)的元素
div[name ^= "luo"]{border: 1px solid coral;} /*匹配的只有1,4号元素*/
[attr $= val]
:选择的是attr属性的值以val结尾(包括val)的元素
div[name $= "luo"]{border: 1px solid coral;} /*匹配的只有2,4号元素*/
[attr *= val]
:选择的是attr属性的值中包含字符串val的元素
div[name *= "luo"]{border: 1px solid coral;} /*匹配的只有1,2,3,4号元素*/