yuanyuanbyte/Blog

CSS系列之选择器的优先级

yuanyuanbyte opened this issue · 0 comments

css基本选择器有哪些?

  1. 通配符选择器 * {}
  2. 标签选择器 body,div,p,ul,li {}
  3. id选择器 #name{}
  4. 类选择器(class选择器).center {}
  5. 后代选择器 .first span{}
  6. 子代选择器 .food>li{}
  7. 内联选择器 <p style=""></p>
  8. !important

权重计算规则:

  1. 第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
  2. 第一等:内联样式,如:style="color:red;",权值为1000.(该方法会造成css难以管理,所以不推荐使用)
  3. 第二等:ID选择器,如:#header,权值为0100.
  4. 第三等:类、伪类、属性选择器如:.bar, 权值为0010.
  5. 第四等:标签、伪元素选择器,如:div ::first-line 权值为0001.
  6. 通配符,子选择器,相邻选择器等。如*>,+, 权值为0000.
  7. 继承的样式没有权值。

css选择器优先级顺序

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

哪些属性可以继承?

可继承的属性:font-size, font-family, color

不可继承的样式:border, padding, margin, width, height