CSS的选择器优先级的权重

在 Selectors Level 3 规范中，一个选择器的优先级（权重）由依次串联的a、b、c三个标记来计算

  1. a: ID选择器 如#header

  2. b: class选择器如.header 属性选择器如[title] 伪类如:link

  3. c: 标签选择器如h1 伪元素选择器如::after

注意：伪类:not不参与优先级的计算

一些例子

只要一个选择器的 a>0，b=0，即使另外一个选择的a=0, b=161，那么前者的权重依然更大。

    a:link{

  color: red; /* 优先级:a=0,b=1,c=1 */

}

.test{

  color: yellow; /* 优先级:a=0,b=1,c=0 */

}

他们的权重（优先级）b是相等的，但是c标记中，前者大于后者，所以最终「a:link」生效显示为红色。

:not() 不参与优先级的计算 但()里面的选择器要计算在内

    <!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS Selectors Level</title>

    <style type="text/css">

    .inner:not(.outer) p {

        color: red;

    }

    .outer .inner p {

        color: orange;

    }

    </style>

</head>

<body>

    <div class="outer">

        <p>outer</p>

        <div class="inner">

            <p>inner</p>

        </div>

    </div>

</body>

</html>

这个inner会显示orange 因为两个优先级相同，下面的会覆盖上面的

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS Selectors Level</title>

    <style type="text/css">

    .inner:not(#outer) p {

        color: red;

    }

    .outer .inner p {

        color: orange;

    }

    </style>

</head>

<body>

    <div class="outer">

        <p>outer</p>

        <div class="inner">

            <p>inner</p>

        </div>

    </div>

</body>

</html>

而这个例子会显示蓝色，上面的:not()内的id选择器也要计算在内

参考链接：

1.知乎的讨论：http://www.zhihu.com/question/21777264

2.某博客：http://www.clanfei.com/2013/11/1731.html

【CSS】选择器优先级的更多相关文章

  1. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS选择器优先级（转）

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  4. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  5. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  6. CSS选择器优先级总结

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

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

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

  8. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  9. 导航栏布局时遇到的问题以及解决办法 css选择器优先级

    得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

  10. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. Alpha版本——展示博客【第二组】

    成员简介 章豪 http://cnblogs.com/roar/ 角色: PM,后端 个人介绍: 努力学习开发的小菜鸡,管理小白,背锅组长 贡献: - 设计开发计划 - 跟踪项目进行 - 组织开组会 ...

  2. 第11篇Kubernetes部署微服务电商平台

        kubernetes部署sock-shop微服务电商平台: 准备条件   确保kubernetes可以访问:reg.yunwei.edu镜像库   需要准备镜像:       部署微服务   ...

  3. XML 和 HTML 之间的差异

    XML 和 HTML 为不同的目的而设计: XML 被设计用来传输和存储数据,其焦点是数据的内容. HTML 被设计用来显示数据,其焦点是数据的外观. HTML 旨在显示信息,而 XML 旨在存储和传 ...

  4. RabbitMQ探索之路（一）：RabbitMQ简介

    一:何为RabbitMQ? 作为Windows忠实用户,不得不提微软自带的MSMQ,Windows自带的一个服务,message是存放在文件系统的,这是最原始的消息队列了. 然而如今的分布式以及消息处 ...

  5. 页面重置样式reset.css

    我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...

  6. 第六周-Scrum Meeting

    第一部分ScrumMeeting 每个人的工作: 成员 任务 ISSUE链接 本周已完成的工作 本周计划完成的工作 工作中遇到的困难 李卓峻 负责商品信息页面的界面设计与功能实现 https://gi ...

  7. JavaWeb解决中文乱码

    1.Get请求,方案有两种 A:修改Tomcat配置文件 server.xml   URIEncoding="UTF-8" 如:<Connector port="8 ...

  8. python之绘制函数pyplot初探

    我们想将我们手里的数据通过图形的方式展示出来,这样我们更直观的,更可以发现数据带给我们的信息.今天给大家介绍要给python中pyplot绘制函数.一般我们想将手里的数据绘制成图形,分为四大步:1.准 ...

  9. sparql学习sparql示例、dbpedia在线验证

    sparql学习sparql示例.dbpedia在线验证 导言 作为sparql群的群主,自己也不太懂sparql,竟然意外接到了一份作业.好久没有接活了.主要就是复习了一下各个语言怎么写.记录一下, ...

  10. 56、salesforce学习笔记（三）

    Date类型 Datetime nowDatetime = Datetime.now(); Datetime datetime1 = Datetime.newInstance(2015,3,1,13, ...