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的三大特性(继承,层叠,优先级)

一,继承 24-css三大特性之继承性.html div{ color: red; font-size:...
  • haha_hello
  • haha_hello
  • 2017年02月10日 17:51
  • 1301

java提高篇(二)-----理解java的三大特性之继承

在《Think in java》中有这样一句话:复用代码是Java众多引人注目的功能之一。但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情。在这句话中最引人注...
  • chenssy
  • chenssy
  • 2013年10月16日 19:37
  • 20594

CSS的三大特性记录

CSS三大特性包括继承性、层叠性、优先级。
  • chenlinwei5
  • chenlinwei5
  • 2017年02月06日 21:33
  • 178

Java三大特性总结

一、继承: 一个类继承另一个类,则继承的类为子类,被继承的类为父类。它的目的就是实现代码的复用。子类继承父类后就自动拥有了父类的属性和方法,但是,父类的私有属性和构造方法并不能被继承。另外,继承...
  • u011641865
  • u011641865
  • 2016年04月10日 23:12
  • 903

Java的三大特性浅谈

众所周知,Java面向对象的三大特性是封装、继承、多态。 封装:指的是类、属性、方法的封装,把功能相同的代码封装成类或者方法。 继承:指的是一个类从另外一个类中获得属性和方法的过程。 多态:指的...
  • y15883626567
  • y15883626567
  • 2015年05月06日 17:52
  • 376

新手必读——OOP三大特征及联系

学过JAVA的都知道OOP(面向对象)三大特征是什么:封装,继承,多态。但是到目前为止,还真没浏览过介绍他们之间关系的文章,所以在下就不免生出点小心思,在这里给晕乎乎的新手介绍一下,从大体来看,可能要...
  • qq_34598667
  • qq_34598667
  • 2016年11月04日 14:58
  • 900

C++ ——三大特性理解

1.封装 突破了C语言函数的概念,封装可以隐藏实现细节,使得代码模块化。2.继承 继承可以扩展已存在的代码模块(类);达到代码重用的目的。要实现继承,可以通过“继承”(Inheri...
  • michael019
  • michael019
  • 2015年10月01日 10:03
  • 2036

C#面向对象三大特性

想要学好面向对象编程,除了掌握语法结构外最重要的就是熟悉面向对象三大特性,这三大特性不是相互独立的而是相互关联、你中有我我中有你的关系,想要真正了解三大特性必须把这三部分当做一个整体来考虑。...
  • xiaouncle
  • xiaouncle
  • 2016年11月23日 21:02
  • 2727

【Html】三种CSS样式的优先级

有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况 1、使用内联式CSS设置“超酷的互联网”文字为粉色。 ...
  • happyhaojie
  • happyhaojie
  • 2015年12月06日 16:31
  • 1052

Java三大特性的理解

本人刚入行,Java开发;对于Java中三大特性的理解,有自己的一些感悟,分享出来,和大家讨论下,请网友们给予批评和指正~ Java的三大特性--[封装],[继承],[多态] 在此之前,我觉得应该...
  • luxun2014
  • luxun2014
  • 2014年11月29日 02:22
  • 1068
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS三大特性之优先级
举报原因:
原因补充:

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