CSS3(1)
示例代码
<div example = "Andy">div1</div>
<div example = "Andy male">div1</div>
<div example = "Lily female">div2</div>
<div example = "Tom male">div3</div>
<div example = "John male">div4</div>
<div example = "Jerry male">div5</div>
<div example = "Mary female">div6</div>
<div example = "A">div6</div>
1.1 属性选择器
1 [attr] 属性名选择器
(包含自定义属性和自带的 HTML 属性)
div [example] {}
选中所有 6 个带有 example 这个自定义属性名的标签
2 [attr="value"] 选择 attr 属性名且只有一个 value 属性的标签
div [example="Andy"]
选中 1 个带有 example 自定义属性并且属性值为 Andy 的标签
3 [attr~="value"] 选择 attr 属性名的属性值列表中有 value 值的标签
div [example~="female"]
选中 2 个 example 属性名的属性值中含 female 的标签
4 [attr^="value"] 选择 attr 属性名的属性值列表中以 value 值为开头的标签
div [example^="J"]
选中 2 个 example 属性名的属性值列表中以 J 为开头的标签
5 [attr$="value"] 选择 attr 属性名的属性值列表中以 value 结尾的标签
div [example$="female"]
选中 4 个 example 属性名的属性值列表中以 female 结尾的标签
6 [attr*="value"] 选择 attr 属性名的属性值列表中含有 value 的标签
div [example*="o"]
选中 2 个 example 属性名的属性值中含 o 的标签
7 [attr|="value"] 选择 attr 属性名的属性值列表中以 value 开头或仅含 value 的标签
div [example|="A"]
选中 2 个 example 属性名的属性值中以 A 开头和仅含 A 的标签