我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?

在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。

那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法:

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为100。

第三等:代表类,伪类和属性选择器,如.content,权值为10。

第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113。

下面是一些计算示例:

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

我们再来看一个具体的例子:假如有以下组样式规则,你能判断出HTML代码中的两个标题是什么颜色吗?

以下是HTML代码:

<div id="content">
    <div id="main-content">
        <h2>CSS简介</h2>
        <p>CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。</p>
        <div class="paragraph">
            <h2 class="first">使用CSS布局的优点</h2>
            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
        </div>
    </div>
</div> #content div#main-content h2{
    color:red;
} #content #main-content>h2{
    color:blue
}
body #content div[id="main-content"] h2{
    color:green;
} #main-content div.paragraph h2{
    color:orange;
}
#main-content [class="paragraph"] h2{
    color:yellow;
}
div#main-content div.paragraph h2.first{
    color:pink;
}

判断出来了么?答案是:两个标题都是红色的!

让我们来一起算算上面六个css样式规则各自的特殊性的值:

第一个特殊性的值=2*100+2*1=202

第二个特殊性的值=2*100+1=201

第三个特殊性的值=1*100+1*10+3*1=113

第四个特殊性的值=1*100+1*10+2*1=112

第五个特殊性的值=1*100+1*10+1*1=111

第六个特殊性的值=1*100+2*10+3*1=123

清楚了吧,第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军,后面一些规则虽然看起来好像更复杂,但特殊性并不是拼谁的选择器表达式写得更长,ID选择器才是王道!
理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。

如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。如果这能解决问
题,就说明样式表中其他地方很可能有更特殊的规则,它覆盖了你的规则。如果是这种情况,你可能需要检查代码,解决特殊性冲突,让代码尽可能简洁。

本文来自:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php

css选择器万年不变的优先级和权重的更多相关文章

  1. css选择器的分类及优先级计算方法总结

    首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  2. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  3. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  4. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  5. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

  6. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  7. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  8. css选择器优先级全解析

    这样一个问题: <!doctype html> <htmllang="en"> <head> <metacharset="UTF ...

  9. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

随机推荐

  1. linux系统root用户忘记密码的重置方法

    如果不小心忘记了新安装的lCentOS7的root密码,现在将找回过程分享给大家. 1.首先,在启动grub菜单,选择编辑选项启动: 2.然后,按e 进入编辑模式: 3.将'linux 16'行'ro ...

  2. iOS 对象的内存管理细节

    通过类创建对象 1.创建对象时,开辟存储空间,通过new方法创建的对象会在 堆 内存中开辟一块存储空间 2初始化所有属性都在堆内存中完成 3.返回值真地址,指针在栈内存中,指针指向的地址是堆里创建对象 ...

  3. 表现层的设计(二)——MVC如何处理复杂的界面元素

    需求描述 一个比较复杂的页面,界面中包含的元素数据来自于许多个有关联或者无关联的表,然后我们要做的就是将数据呈现在界面上. 10年前大概都是这么干的 直接写一个复杂的SQL语句,返回一个包含所需数据的 ...

  4. Devils never rest

    一个人 练习一个人 书名 看到就被吸引了,然后亚马逊下手 作者很文艺,我很喜欢作者内心的那份宁静. 我一个人吃饭 旅行 到处走走停停 也一个人看书 写信 自己对话谈心 依然是心内一片寂静,总是不由自主 ...

  5. cocoapods真机调试出现问题解决

    swift中使用cocoapods时,Podfile中必须写上 use_frameworks! 使用cocoapods导入框架在真机调试出现问题的解决方案: 1.build phases 2.+ ne ...

  6. 【Python】if __name__ == "__main__"做了什么?

    在Python的很多源文件中,会有这样的语句: if __name__ == '__main__': # script code here 比如有两个源文件A.py和B.py,都有上面的代码:在B.p ...

  7. mysql高并发和表类型

    高并发:http://www.cnblogs.com/wangchaozhi/p/5061378.html 表类型:http://www.xiaoxiaozi.com/2009/07/14/1171/

  8. November 2nd Week 45th Wednesday 2016

    If your ship doesn't come in, swim out to it. 如果你的船不驶进来,那你就朝他游过去吧! Swim out to it, don't fear that y ...

  9. 移动wap隐藏的坑

    非原创,只做转载 ------------------------------------------------------------------------------------------- ...

  10. HP-SOCKET TCP/UDP通信框架库解析

    项目概述: HP-SOCKET是一套通用TCP/UDP通信框架,包括服务器.客户端.Agent组件:其目标是提供高性能.通用性.简易性.可扩展.可定制: 鉴于此,其仅实现基本的通用框架通信.数据收发功 ...