CSS三大特性之优先级

原创 2016年08月30日 21:51:57

优先级的顺序:行内样式>id选择器>类选择器>标签选择器>*通配符选择器>继承


有点晕,先看代码,例如有如下代码,运行后的字体颜色为红色,可以从行内样式依次进行屏蔽,就可以发现样式的优先级如上所述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { /*通配符选择器*/
            color: pink;
        }
        body {  /*继承*/
            color: green;
        }
        div {   /*标签选择器*/
            color: blue;
        }
        .d1 {   /*类选择器*/
            color: yellow;
        }
        #d2 {   /*id选择器*/
            color: purple;
        }
    </style>
</head>
<body>
    <!--行类样式-->
   <div style="color: red " class="d1" id="d2">优先级</div>
</body>
</html>


但是优先级有个变数就是important,它可以改变选择器的优先级,如果在某个样式后面添加了important后,该选择器的优先级就会最高,例如:还是如上代码,给类选择器添加important后,字体颜色就会变成黄色。</span>

.d1 {   /*类选择器*/
    color: yellow !important;
}


但是important有一个特殊性,它用在继承上不起作用,因为属性无法继承。例如给body添加important,其它选择器不添加,最后字体的颜色还是红色。

body { /*继承选择器*/ 
     color: green !important;
}

接下来讲优先级的权重

权重算法:(0 0 0 0

第一个0对应着important的个数,

第二个0对应着id选择器的个数

第三个0对应着类选择器的个数

第四个0对应着标签选择器的个数

比较方法:先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重高,如果第一个相同,则比较第二个,依此类推。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div div { /*(0, 0, 0, 2)*/
            color: red;
        }
        div .son { /*(0, 0, 1, 1)*/
            color: blue;
        }
        div #son {/*(0, 1, 0, 1)*/
            color: pink;
        }
        .father div {/*(0, 0, 1, 1)*/
            color: yellow;
        }
        .father .son {/*(0, 0, 2, 0)*/
            color: green;
        }
        .father #son {/*(0, 1, 1, 0)*/
            color: purple;
        }
        #father div {/*(0, 1, 0, 1)*/
            color: gray;
        }
    </style>
</head>
<body>
<div class="father" id="father">
    <div class="son" id="son">权重</div>
</div>
</body>
</html>

 

通过权重的算法我们可以很快的得知最后字体的颜色为紫色

如果给下面的样式添加了!important,则权重变成最高,字体颜色将为绿色

.father .son {/*(1, 0, 2, 0)*/
    color: green !important;
}


最后说一下选择器的工作原理

选择器在查找元素的时候不是从左往右找,而是从右往左找

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*从左往右找*/
        div div { /*先找到一个子元素标签为div,然后再找这个元素是否有一个父元素标签也为div*/
            color: red;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
<div>
    文字
    <div>
        文字
        <div>文字</div>
    </div>
</div>
</body>
</html>
结果显而易见是:蓝,红,红


版权声明:本文为博主原创文章,未经博主允许不得转载。

css三大特性继承、层叠和优先级(权重)

1 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅...

css 的三大特性 继承,层叠,优先级

css的三大特性 继承,层叠,优先级 1.css 的继承    (1).继承:某个属性从父元素传递到子元素的机制    (2).继承的意义:不用为每个元素指定的属...

css的三大特性(继承,层叠,优先级)

一,继承 24-css三大特性之继承性.html div{ color: red; font-size:...

CSS三大特性继承性,层叠性,优先级

一、继承性1)什么是继承性? 给父元素设置一些属性,子元素/后代也可以使用,这个我们称之为继承性。 2 ) 并不是所有属性都可以继承的,那么有哪些属性具有继承性? 只有以color/font-/te...

【CSS】——三大基础选择器以及优先级

前提  小编最近在学习前端的一些内容,想要做出用户体验度高的界面,CSS是我们必须要学习的一门编程语言。何为CSS?   CSS(Cascading Style Sheets,层叠样式表)是一种用...

CSS的三大特性总结

层叠性、继承性、优先级

CSS三大特性

CSS三大特性 1.继承性 作用:子元素可以继承父元素的样式 text-,font-,line-这些元素开头的都可以继承,以及color属性 特殊性: (1)a标签的字体颜色不能继承,必...

HTML入门学习笔记--CSS三大特性(4)

24-CSS三大特性之继承性1.什么是继承性?作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性注意点:1.并不是所有的属性都可以继承, 只有以color/font-/text...

CSS三大特性之继承性

CSS有三大特性,分别是继承性,层叠性,优先级,这里讲解继承性 继承性是指子元素可以继承父元素的属性,例如下面的代码,div中包含2个p标签,1一个span标签,当给div设置字体颜色为红色时,他的子...

css三大特性

Css三大特性 1.继承性 子代可以直接使用父代的某些样式(特征),当然有些可以继承,有些不能继承。 inherit *{ mar...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS三大特性之优先级
举报原因:
原因补充:

(最多只允许输入30个字)