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 的标签

---