这样一个问题：

  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>CSS Selectors Level</title>
  6. <styletype="text/css">
  7. .inner:not(#outer) p{color: blue;}
  8. .outer .inner p{color: orange;}
  9. </style>
  10. </head>
  11. <body>
  12. <divclass="outer">
  13. <p>outer</p>
  14. <divclass="inner">
  15. <p>inner</p>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

猜猜是什么颜色？

蓝色。

为什么呢？为啥:not伪类选择器的优先级会比类选择器还高？搜索了一下，发现了知乎上@一丝大大的一篇回答。

规范中已经写的很清楚：

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

计算选择器里面的class选择器，属性选择器，伪类选择器的个数(=b)

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

  1. ID选择器「如：#header」的个数（=a）
  2. Class选择器「如：.foo」、属性选择器「如：[class]」、伪类「如：:link」的个数（=b）
  3. 标签选择器「如：h1」、伪元素「如：:after」的个数(=c)
  4. 忽略「*」选择器
  5. 虽然伪类(如:hover)参与CSS优先级的计算，但是「:not」不参与计算。
  6. HTML style 属性内的优先级在CSS2.1中有描述（实际在浏览器的实现中它不直接参与优先级的计算）

Assigning property values, Cascading, and Inheritance

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

例1：

  1. a:link{
  2. color: red;/* 优先级:a=0,b=1,c=1 */
  3. }
  4. .test{
  5. color: yellow;/* 优先级:a=0,b=1,c=0 */
  6. }

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

例2：

  1. div[class].main a{
  2. color:red;/* 优先级:a=0,b=2,c=2 */
  3. }
  4. body div a[href]{
  5. color:blue;/* 优先级:a=0,b=1,c=3 */
  6. }

由于属性选择器和class选择器都计算在b标记中，所以前者b=2>后者b=1，最终显示为红色。

切记，不要把权重简单的作为10进制数字比较其大小。

转载自：蓝飞技术部落格

css选择器优先级全解析的更多相关文章

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

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

  2. 关于Css选择器优先级

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

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

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

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

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

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

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

  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选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

随机推荐

  1. SQL语句性能测试

    /* --Sqlserver 清楚执行缓存, 用于SQL语句性能测试 DBCC DROPCLEANBUFFERS DBCC FREEPROCCACHE */

  2. java学习教程

    java依然是目前比较流行的语言.虽然,本人是C#开发者,但是由于公司决定使用java开发,所以只好开始学习java.在学校时候只是接触过没有过深的学习过,而且参加工作后基本也一直在搞C#.好在,现在 ...

  3. 1336 - Sigma Function---LightOj1336

    http://lightoj.com/volume_showproblem.php?problem=1336 题目大意:求1到n之间的数因子和是偶数有几个对于任意一个x, 都有x = p1^a1*p2 ...

  4. c++ 课堂作业（1）

    一.题目 Create a program that asks for the radius of a circle and prints the area of that circle, using ...

  5. third class

    09remain timer 1.button的背景改变:放在背景图片里面,改变背景图片的位置,这样更简洁 08 simple clock 1.上下padding一样,居中2.setInterval( ...

  6. JS-随机排序

    var arr = [ 1,2,3,4,5,6,7,8 ];arr.sort(function ( a, b ) {    return Math.random() - 0.5;});alert( a ...

  7. vs调试断点进不去的解决办法

    原创文章,禁止转载. 断点进不去的解决办法:  确认是debug版本  确认生成了调试信息  确认在编译和连接的工程配置中指定了相同的匹配的pdb文件名,而不是默认的vc100.pdb等名字(无关) ...

  8. AOP实现原理

    Spring 为解耦而生,其中AOP(面向切面编程)是很浓重的一笔. 本文来探讨一下AOP实现的原理. 一. 概述 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负 ...

  9. Win7 64下Visual C++ 6.0不兼容

    Win7 64下Visual C++ 6.0不兼容 安装VSE6.0: 1.运行setup.exe安装程序,会弹出如下的的 程序兼容性助手 提示框,这个是Win7在警告用户vc6存在兼容性问题:此程序 ...

  10. SAS 画折线图PROC GPLOT

    虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...