可用的选择器

选择器类别

选择器用于选择要描述的那个元素，可以理解为 HTML 元素在 CSS 中的呈现

其类型可以分为

• 全局选择器
• 类别选择器
• 关系选择器

类别选择器包括

• 元素选择器
• 伪元素选择器
• 属性选择器
• 类选择器
• 伪类选择器
• 编号选择器

关系选择器包括

• 样式相同选择器
• 后代选择器
• 子代选择器
• 邻接兄弟选择器
• 通用兄弟选择器

---

全局选择器

• 希望选中文档中全部的元素
• 或父元素中全部的元素

---

各类别选择器的功能

元素选择器

• 希望选中 使用这个名字 的元素

伪元素选择器

• 根据 某部分 在这个元素中的位置将其选择

属性选择器

• 根据 属性 选择元素

类选择器

• 希望选中 带有这个类属性 的元素

伪类选择器

• 根据 元素在父元素中的位置 选择元素，或
• 根据 元素所处的特定状态 选择元素

编号选择器

• 希望选中 带有这个编号属性 的元素

---

部分类别选择器的细节

伪元素选择器

• 它选中的是 某部分，而不是元素
• 其实它最终将这部分看成了一个元素
• 因为选择器只能用于选择元素
• 另外，伪元素对于一些屏幕阅读器来说，是不可见的

属性选择器

• 不止一种
• 并且，属性值要区分大小写

伪类选择器

• 可以根据 元素所处的特定状态 选择元素
• 这个特定状态可能是元素 原来就有 的，也可能是 后来才有 的
• 总之，不是一直存在的

---

各种属性选择器

• 属性值开始选择器
• 属性值结束选择器
• 属性值内含选择器
• 属性具化选择器
• 属性键值对选择器
• 属性键值对存在选择器
• 属性键值对细化选择器

各种属性选择器的解释

属性值开始选择器

• 希望在带有同一个属性的元素中，选中 属性值以此值开始 的元素

属性值结束选择器

• 希望在带有同一个属性的元素中，选中 属性值以此值结束 的元素

属性值内含选择器

• 希望在拥有同一个属性的元素中，选中 属性值中包含这部分字符的元素

属性具化选择器

• 希望选中 带有这个属性 的元素

属性键值对选择器

• 希望选中 使用这个属性键值对 的元素

属性键值对存在选择器

• 希望选中 使用这个属性键值对，或在这个属性名的属性值中，存在这个属性值 的元素，看似是一对多的关系，实际仍是一对一的关系

属性键值对细化选择器

• 希望选中 使用这个属性键值对，或这个属性名的属性值为这个属性值细化产物 的元素

---

关系选择器的解释

样式相同选择器

• 不同的元素具有相同的样式时，可以将代表不同元素的选择器写在一起，彼此用逗号相隔
• 此时，任何一个选择器不能被解析，都会导致这条样式被忽略

后代选择器

• 希望选中某个元素的后代时，将彼此用空格连接

子代选择器

• 希望选中某个元素的直接子元素时，将彼此用大于号连接

邻接兄弟选择器

• 希望选中某个元素的兄弟元素时，将彼此用波浪线连接

通用兄弟选择器

• 希望选中某个元素的下一个兄弟元素时，将彼此用加号连接

既又选择器

• 希望在某一类元素之中选中一个元素时，将彼此连写

---