css中的选择器

1. 选择器分类

1. id选择器
   #id{}
2. 类选择器
   .classname{}
3. 元素选择器
   element{}
4. 子代选择器
   part1 > part2{}
5. 后代选择器
   part1"空格"part2{}
6. 兄弟选择器
   后一个兄弟：part1 + part2
   所有兄弟：part1 ~ part2
7. 属性选择器
   [id]：选择具有id属性的元素
   [id=‘1’]：选择具有id属性并且属性值为’1’的元素
   [class ~= ‘one’]：选择具有class属性，并且属性值之一等于’one’的元素
   [class *= ‘o’]：选择具有class属性，并且属性值中包含’o’字符的元素
   [class ^- ‘o’]：选择具有class属性，并且属性值以’o’开头的元素
   [class $= ‘o’]：选择具有class属性，并且属性值以’o’结尾的元素
8. 组合选择器(或者)
   part1, part2{}
9. 嵌套选择器(并且)
   part1part2{}
10. 伪类选择器

• 子代元素相关
  ：first-child
  ：last-chid
  ：nth-child(num/odd/even)
  ：fist-of-type
  ：last-of-type
• 元素状态相关
  a标签
  ：link
  ：hover
  ：active
  ：visited
  其他
  ：checked
  ：default
  ：enabled
  ：disabled
  ：valid
  ：invalid
  ：required
  ：optional

11. 伪元素选择器
    ::after
    ::before
    ::first-line
    ::first-letter
    ::selection

2. 选择器优先级

我们通过权重量化一个选择器

• 100
  id选择器
• 10
  类选择器，属性选择器，伪类选择器
• 1
  元素选择器，伪元素选择器

在整个选择器中，每包含一个id选择器加100的特性值，其他的类推。
注:
先看级别：行内样式>内部样式>外部样式
级别相同，再看权重：权重越大，优先级越高
权重相同:后写的样式覆盖先写的样式