CSS 选择器优先级

CSS 有三类选择器：标签选择器、class 选择器、id 选择器。

一、行内样式 > 内部样式 > 外部样式

　　1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

　　2. 最后定义的优先级最高（就近原则）

　　可参考博客 https://www.cnblogs.com/lyw-hunnu/p/lyw_cssusage.html

二、id 选择器 > class 选择器 > 标签选择器

<style type="text/css">
    div{ color:green; }
    #idred{ color:red; }
    .classblue{ color:blue; }
</style>

<div>CSS 标签选择器</div>   <!--绿色-->
<div class="classblue">CSS class选择器</div>   <!--蓝色-->
<div id="idred">CSS id 选择器</div>   <!--红色-->

 

　　可以看出

　　　　class 选择器 > 标签选择器

　　　　id 选择器 > 标签选择器

<style type="text/css">
    #idred{ color:red; }
    .classblue{ color:blue; }
</style>

<div id="idred" class="classblue">CSS id class 选择器</div>    <!--红色-->

<style type="text/css">
    #idred{ color:red; }
    .classblue{ color:blue; }
</style>

<div  class="classblue" id="idred">CSS id class 选择器</div>    <!--红色-->

 

　　上述，调换div 中 class 和 id 的位置，显示结果依旧为 红色，由此可以看出 id 选择器 > class 选择器

　　因此有，id 选择器 > class 选择器 > 标签选择器

三、对同一个标签选择器

p{ color:green; }
p{ color:blue; }

　　最后这个 p 元素额颜色为 蓝色 。

四、有两个 class 属性值

　　有以下两种 CSS 样式

第一种
.classblue{ color:blue; }
.classyellow{ color:yellow; }
第二种
.classyellow{ color:yellow; }
.classblue{ color:blue; }

　　有以下两种 html 的 div 标签

<div id="classyellow classblue">CSS选择器 黄在前，蓝在后</div>
<!--第一种 CSS 样式为黄色，第二种 CSS 样式为 蓝色-->

<div class="classblue classyellow">CSS选择器 黄在后，蓝在前</div>
<!--第一种 CSS 样式为黄色，第二种 CSS 样式为 蓝色-->

　　可以看出，当一个元素有两个 class 属性值时，与 class 属性值在元素中定义的位置无关，而是与 CSS 样式设置的位置有关，后者覆盖前者。

五、选择器权值

　　同一个样式表中：

　　　　1. 权值相同，就近原则（离被设置元素跃进优先级越高）

　　　　2. 权值不同，根据权值来判断 CSS 样式，那种 CSS 样式权值高，就使用哪种样式。

选择器	权值
标签选择器	1
类选择器和伪类	10
ID 选择器	100
通配符选择器	0
行内选择器	1000

 

 

 

 

 

　　

　　

 

　　权值规则：

　　　　1. 统计不同选择器的个数

　　　　2. 每类选择器的个数乘以相应权值

　　　　3. 把所有的指相加得出选择器的权值

　　例如：给下列元素加样式

<div ID="main">
    <div>
        <div class="warning">
            <h2>加样式的元素</h2>
        </div>
        <div class="test">
            <h2>不加样式的元素</h2>
        </div>
    </div>
</div>

 

#main div.warning h2{ color:red; }
    id : 1      class : 1     标签 : 2
    1*100=100   1*10=10      2*1=1
    权值   :  100 + 10 + 2 =112

#main div h2 { color:yellow; }
    权值   ： 100 + 2 =102

所以最后加样式的元素 h2 显示的颜色为 红色

 

六、!important 规则

　　可调整样式优先级，添加在样式优先级之后，中间用空格隔开

div{ color:red; !important }

 

　　看下面的例子：

<style type="text/css">
    p{ color:blue !important; }
</style>

<p color="red">最后显示为蓝色</p>

　　行内样式的优先级比内部样式的高，但是这里最后显示的颜色却为 红色，这是因为 !important 提高了样式的优先级。

 

转载于:https://www.cnblogs.com/lyw-hunnu/p/11246091.html