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. 2018-2-13-win10-uwp-HttpClient-post错误

    title author date CreateTime categories win10 uwp HttpClient post错误 lindexi 2018-2-13 17:23:3 +0800 ...

  2. 深入学习Redis持久化

    一.Redis高可用概述 在介绍Redis高可用之前,先说明一下在Redis的语境中高可用的含义. 我们知道,在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常 ...

  3. shells - 有效登录 shell 的路径名

    描述 /etc/shells 是一个文本文件,其中包含有效登录 shell 的路径全名. chsh(1) 需要参考这个文件,并且其他程序也可以查询该文件.有些程序从这个文件判断用户是不是标准用户.比如 ...

  4. socket套接字编程 HTTP协议

    socket套接字编程  套接字介绍  1. 套接字 : 实现网络编程进行数据传输的一种技术手段  2. Python实现套接字编程:import  socket  3. 套接字分类 >流式套接 ...

  5. unittest接口自动化测试报告

    unittest接口自动化测试报告 展示: 代码: __author__ = "Wai Yip Tung, Findyou" __version__ = "0.8.2.1 ...

  6. 2019牛客多校第五场F maximum clique 1 最大独立集

    题意:给你n个数,现在让你选择一个数目最大的集合,使得集合中任意两个数的二进制表示至少有两位不同,问这个集合最大是多大?并且输出具体方案.保证n个数互不相同. 思路:容易发现,如果两个数不能同时在集合 ...

  7. 入门GoldenGate总结

    前言 GoldenGate 是oracle官方的一款数据同步产品,类似于msyql的主从复制,配置也稍稍复杂,其中概念一定要搞清楚,不然会被坑的爬不起. 坑 1.数据在线同步(不是指数据初始化),只能 ...

  8. loadrunner 11安装教程

    见百度经验,大神教程 https://jingyan.baidu.com/article/da1091fb199da7027849d6ff.html

  9. 18.synchronized

    同步的前提:  必须要有两个或者两个以上的线程  必须是多个线程使用同一个锁  必须保证同步中只能有一个线程在运行  好处:解决了多线程的安全问题  弊端:多个线程需要判断锁,较为消耗资源.抢锁的资源 ...

  10. JSP自定义方法标签

    1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...