【CSS】选择器优先级
CSS的选择器优先级的权重
在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a、b、c三个标记来计算
a: ID选择器 如#header
b: class选择器如.header 属性选择器如[title] 伪类如:link
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】选择器优先级的更多相关文章
- 关于Css选择器优先级
今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
- CSS选择器优先级(转)
原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...
- day44:CSS选择器优先级&JS基础
目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...
- 看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- 导航栏布局时遇到的问题以及解决办法 css选择器优先级
得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
随机推荐
- 2018-2-13-win10-uwp-HttpClient-post错误
title author date CreateTime categories win10 uwp HttpClient post错误 lindexi 2018-2-13 17:23:3 +0800 ...
- 深入学习Redis持久化
一.Redis高可用概述 在介绍Redis高可用之前,先说明一下在Redis的语境中高可用的含义. 我们知道,在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常 ...
- shells - 有效登录 shell 的路径名
描述 /etc/shells 是一个文本文件,其中包含有效登录 shell 的路径全名. chsh(1) 需要参考这个文件,并且其他程序也可以查询该文件.有些程序从这个文件判断用户是不是标准用户.比如 ...
- socket套接字编程 HTTP协议
socket套接字编程 套接字介绍 1. 套接字 : 实现网络编程进行数据传输的一种技术手段 2. Python实现套接字编程:import socket 3. 套接字分类 >流式套接 ...
- unittest接口自动化测试报告
unittest接口自动化测试报告 展示: 代码: __author__ = "Wai Yip Tung, Findyou" __version__ = "0.8.2.1 ...
- 2019牛客多校第五场F maximum clique 1 最大独立集
题意:给你n个数,现在让你选择一个数目最大的集合,使得集合中任意两个数的二进制表示至少有两位不同,问这个集合最大是多大?并且输出具体方案.保证n个数互不相同. 思路:容易发现,如果两个数不能同时在集合 ...
- 入门GoldenGate总结
前言 GoldenGate 是oracle官方的一款数据同步产品,类似于msyql的主从复制,配置也稍稍复杂,其中概念一定要搞清楚,不然会被坑的爬不起. 坑 1.数据在线同步(不是指数据初始化),只能 ...
- loadrunner 11安装教程
见百度经验,大神教程 https://jingyan.baidu.com/article/da1091fb199da7027849d6ff.html
- 18.synchronized
同步的前提: 必须要有两个或者两个以上的线程 必须是多个线程使用同一个锁 必须保证同步中只能有一个线程在运行 好处:解决了多线程的安全问题 弊端:多个线程需要判断锁,较为消耗资源.抢锁的资源 ...
- JSP自定义方法标签
1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...