css样式优先级

权重值为主，权重值相同，应用最后定义的样式

外部样式表 < 内部样式表 < 内联样式

权重规则：

类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

    一：内联样式，权重1000，即标签内的style属性设置的样式

    二：ID选择器，权重100，例如：#id{...}

    三：类选择器，伪类选择器，属性选择器，权重10，例如.class{...}、:hover{...}、[arrtibute=value]

    四：标签选择器，伪元素选择器，权重1，例如div{...}、::after{...}

    超然地位：!important（最高级）

   没有影响：通配选择符(*), 关系选择符 (+, >, ~, ' ')  和 否定伪类(:not()) 

---

 

1）:not() 内部声明的选择器是会影响优先级

CSS样式：

div.outer p {
  color:red;
}
div:not(.outer) p {
  color: green;
}

HTML片段：

<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>

运行结果：

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

CSS样式：

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

HTML片段：

<div id="parent">
  <h1>Here is a title!</h1>
</div>

运行结果：

！！紫色是h1直接定位到元素,绿色是从父元素继承