css中的选择器

---

简单selectors

• id选择器

  .id { Declarations block }
  

• class选择器

  .class { Declarations block }
  

• 元素选择器

  element { Declarations block }
  

• 通配符选择器

  * { Declarations block }
  

---

属性选择器

• 属性名选择器

  [attr] { Declarations block }
  

• 属性名与属性值配对选择器

  [attr=val] { Declarations block }
  

• 属性名与属性值配对选择器（但是值是以空格作为分隔符的序列中的一员）

  [attr~=val] { Declarations block }
  

• 属性名与属性值配对选择器
  （但是值是以var-作为开头的字符串）

  [attr|=val] { Declarations block }
  

• 属性名与属性值配对选择器（但是值是以var作为开头的字符串）

  [attr^=val] { Declarations block }
  

• 属性名与属性值配对选择器（但是值是以var作为结尾的字符串）

  [attr$=val] { Declarations block }
  

• 属性名与属性值配对选择器（但是值中包含var的字符串）

  [attr*=val] { Declarations block }
  

---

伪选择器

• 伪类选择器

  selectors:keyword { Declarations block }
  

  伪类keyword参考
• 伪元素选择器

  selectors::keyword { Declarations block }
  

  伪元素keyword参考

---

关系选择器

• 后代选择器（A后代中匹配B的. 儿子、儿子的儿子、...）

  selectorA selectorB { Declarations block }
  

• 父子选择器(A儿子中匹配B的)

  selectorA>selectorB { Declarations block }
  

• 兄弟选择器（紧接着A的兄弟为B）

  selectorA+selectorB { Declarations block }
  

• 兄弟选择器(A兄弟中匹配B的)

  selectorA~selectorB { Declarations block }
  

---

同规则多选器

commSelector1,commSelector2,... { Declarations block }

---

参考

• MDN-css选择器介绍