CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算

通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原则(priority rules)”!

首先,我们来一个简单的例子:

<body>
    <ul id="summer-drinks">
       <li class="favorite">First section</li>
       <li>Second section</li>
       <li>Third section</li>
    </ul>
</body>

设置样式:

<style>
    ul#summer-drinks li {
        font-weight: normal;
        font-size: 12px;
        color: black;
    }
    .favorite {
        color: red;
        font-weight: bold;
    }
</style>

截图:

然后查看效果我们发现,效果并不是我们想要的,我们favorite列文本文字并没有变红和加粗,这儿肯定出了一些意想不到的事,注意下面我们可以知道,我们的麻烦出现在这儿:

    ul#summer-drinks li {
        font-weight: normal;
        font-size: 12px;
        color: black;
    }

两个不同的CSS选择器同时设置了文字的color和font-weight,而仅仅font-size只声明了一次,因此我们可以很清晰的看到效果。对于“冲突”,浏览器必须做出选择,哪一个选择器样式最终产生效果。也就引出了以下一系列标准特异性(即权重优先级)的规则

计算CSS样式选择器优先级的“值”

  先看看实际选择器脚色扮演优先级:

  在这里我们形象的设定:

    1、如果元素拥有内联样式(inline style),那么给内联样式1000点  例如:<h1 style="color:#fff;">

    2、对于每个ID,我们给他0100点  例如:#div

    3、对于每个Class、伪类(pseudo-classes)或属性选择器,我们给他0010点  例如:.classes,[attributes]和:hover,:focus

    4、对于每个具体标签元素引用和伪元素(pseudo-elements),我们给他0001点  例如::before和:after

这里数字你可以看成一般的数字计数什么的,例如0100,就可以看做100,只是下面运用形象点而是用0100

下面举例说明:

例一:

      ul#nav li.active a

例二:

      body.ie7 .col_3 h2~h2

例三:

      #footer *:not(nav) li

注意:“ :not() ”自身没有权重值(这里权重值是指上面的数点,像0100),仅括号内的有权重值!

例四:

      <li style="color:red;">

例五:

      ul > li ul li ol li:first-letter

例六:

A:

div#demo{background-image:url(n.gif);}

B:

div[id="demo"]{background-image:url(n.gif)}

  代码:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                height:100px;
                width:100px;
            }
            div#demo{
                background:red;
            }
            div[id="demo"]{
                background:green;
            }
        </style>
    </head>
    <body>
        <div id="demo"></div>
    </body>
</html>

  截图:

这里可以验证出:A情况中的权重比B中的权重高一点,也就是ID选择器的权重比属性选择器权重高

重点注意:

    1、*选择器没有权重值,当然我们可以形象设定他的权重值为0000点

    2、我们设定伪元素(例如:“ :first-line ”)权重值为0001点,而设定伪类权重值为0010点

    3、伪类中“ :not() ”本身不计权重值,而在其括号里的则相应设定权重值

    4、“ !important ”比较高级,权重比内联样式的权重还高,他的样式设定可以覆盖内联样式的样式,当然了,我们可以用相同的“ !important ”去设定不同样式来      覆盖先前的“ !important ”设定的样式(这里需要知道,同一样式文件中,相同选择器多次声明样式时,是后声明的样式也就是最新声明的覆盖前面声明的样式),这里我们也可以形象的设定“ !important ”的权重值为10000点

    5、ID选择器权重比属性选择器权重高一点  例:如上例六

参考文章:

  Chris Coyier的Specifics on CSS Specificity

   Vitaly Friedman的CSS Specificity: Things You Should Know    

至此,CSS选择器设定样式的优先级计算也就结束了,如果写的不好大家可以在评论中补充~~

谢谢~~

时间: 2024-11-09 00:10:08

CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)的相关文章

CSS样式权重的级联cascade的概念

我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以后只能在firefox中正常显示.因为那个css涉及的滤镜太多,而且还有css中"级联(cascade)"这种强大功能的支持. 那么级联样式表css中的"级联"到底是什么意思呢?W3C是这样来描述的:css级联为每个样式规则指派权重,若元素应用了多个样式规则,那么将优先

深入理解CSS:padding

padding与元素的尺寸 对于块级(block)元素 padding会影响元素的尺寸:但是当width:auto或者box-sizing:border-box;时,padding不会影响元素的尺寸(有例外!),只会压缩内容区域的尺寸,但是如果padding的尺寸过大时,也会影响元素尺寸. 总结: padding值暴走,一定会影响元素尺寸 width非auto并且box-sizing非border-box时,padding影响尺寸 width为auto或box-sizing为border-box

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西:而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框就是盒子本身了:至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

【CSS】理解CSS

CSS(Cascading Style Sheet,层叠样式表),及其精巧且富有表达力,开发者可以用最为高效的方式高度掌控网页内容的表示. 1. 盒模型 CSS中的一个基本概念是盒模型(box model).可见元素会在页面中占据一个矩形区域,该区域会在页面中占据一个矩形区域,该区域就是元素的盒子,由四部分组成,如下图所示: 元素盒子有两部分是可见的:内容和边框.内边距是内容和边框之间的空间,外边距是边框和页面上其他元素之间的空间. 元素还可以包含其他元素.这种情况下,父元素的内容盒子称为子元素

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu