css选择器优先级

important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符(*)css

  1. important声明 1,0,0,0
  2. ID选择器 0,1,0,0
  3. 类选择器 0,0,1,0
  4. 伪类选择器 0,0,1,0
  5. 属性选择器 0,0,1,0
  6. 标签选择器 0,0,0,1
  7. 伪元素选择器 0,0,0,1
  8. 通配符选择器 0,0,0,0

有人说外部样式<内部样式,其实否则,其实外部样式=内部样式,谁在前面定义谁就被覆盖spa

class = 属性 = 伪类:例如.className的优先级和[class='className']:hover的优先级是同样的,甚至.className的优先级和[id='idName']:hover的优先级也是同样code

空格>的优先级是同样的,例如body bbody>b是同样的优先级blog

伪元素的优先级和标签选择器的优先级同样,可是咱们每每会遇到一些问题,例如:io

::selection{
    color: red;
}
div{
    color:black!important;
}

被选中的文字仍是红色的,不会被黑色样式覆盖,其缘由是这里的black!important是做用在了::selection的父元素而不是直接做用在::selection上,class

而咱们调用伪元素的时候必需要写上伪元素不能像其余元素同样只写它的class或者id或者[attr='~~~'],因此要判断关于伪元素优先级,都是看它前面的css选择器优先级import

相关文章
相关标签/搜索