CSS样式优先级

1.CSS样式优先级如下：

元素(类型)选择器(如,h1) < 伪元素(如,::before) < 类选择器(如,.example) < 属性选择器(如：[type="radio"]) < 伪类(如,:hover) < ID 选择器(如,#example) < 内联样式(如,style="")

伪元素与伪类区别：有没有创建一个文档树之外的元素。详见：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

2.其他：

a.通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响

b.!important 规则:此声明将覆盖任何其他声明,如果都有!important将根据选择符优先级比较。

3.注意：

1.无视DOM树中的距离，相同选择器从上而下，越往下优先级越高

body h1 {
  color: green;
  }  
html h1 {
  color: purple;
  }

  
      
      
题目为紫色
  
    
 

2.直接给目标元素添加样式和目标元素继承样式对比

#parent {
  color: green;
  }  
h1 {
  color: purple;
  }


    
        
题目为紫色
    

3.对同一个目标元素使用多个类选择器，部分排在后面的优先

.green-text{
  color: green;
  }
.purple-text {
  color: purple;
  }

  
      
        
题目为紫色