CSS - 选择器类型及描述整理

---

目录

• 主要参考
• 基本选择器
• 组合选择器

---

主要参考

• CSS selectors - CSS: Cascading Style Sheets | MDN

---

基本选择器

• Type 选择器

  element { style properties }
  

• Class 选择器

  .class_name { style properties }
  

• ID 选择器

  #id_value { style properties }
  

• 通用选择器

  * { style properties }
  

  （不建议使用，影响网页性能）

• 属性选择器

用法	描述
[attr]	表示带有以 attr 命名的属性的元素
[attr=value]	表示带有以 attr 命名的属性，且值为“value”的元素
[attr~=value]	表示带有以 attr 命名的属性，且值列表（以空格风格）包含“value”的元素
[attr	=value]
[attr^=value]	表示带有以 attr 命名的属性，且值是以“value”开头的元素
[attr$=value]	表示带有以 attr 命名的属性，且值是以“value”结尾的元素
[attr*=value]	表示带有以 attr 命名的属性，且值中包含“value”的元素

组合选择器

• 子选择器

  selector1 > selector2 { style properties }
  

  selector2 是 selector1 的直接子元素

• 后代选择器

  selector1 selector2 { style properties }
  

  selector2 是 selector1 的后代元素，但（对比子选择器）不需要具有严格的父子关系

• 紧邻兄弟选择器

  former_element + target_element { style properties }
  

  target_element 是紧跟在 former_element 之后的同级元素

• 一般兄弟选择器

  former_element ~ target_element { style properties }
  

  target_element 是位于 former_element 之后的同级元素，但（对比紧邻兄弟选择器）不需要严格紧随

---