用CSS这么些年，从来没从算法级别考虑过它的优先级原理，只是凭经验记住类似“id最大，class其次”这种tip。今儿看到一篇讲css优先级算法的文章，豁然开朗，引过来，记录一下。
其实CSS的算法就是下面这张图，
解释一下：
CSS中主要有 style， #， .，tag，四种 selector 。按照顺序分别占据*,*,*,*的第1，2，3，4个位置。将一串层叠表达式中出现的selector分别在对应位置上叠加可得到一串数字。但需要比较css优先级时，只要比较这串数字即可。上面表中的例子不够鲜明，我们可以举个极端的例子。一个div，被11个div包含，本身既具有id又具有class。即：
<html>
<head>
<style type="text/css">
.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12{color:red;}
#b{color:green;}
</style>
</head>
<body>
<div class="a1"><div class="a2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10"><div class="a11">
<div class="a12" id="b">
CSS Selector的优先级
</div>
</div></div></div></div></div></div></div></div></div></div></div>
最里层的div拥有两个css串，第一个串的值是0,0,12,0，第二个串是0,1,0,0。两串值的比较是单纯的位比较，按照从第一位到第四位的比较顺序。因此第二个串的值比第一个大，这段代码的结果是字体成绿色。
我们做一个小的改动，给外层的其中一个div增加id属性，即
<html>
<head>
<style type="text/css">
.a1 #b2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12{color:red;}
#b{color:green;}
</style>
</head>
<body>
<div class="a1"><div class="a2" id="b2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10">
<div class="a11">
<div class="a12" id="b">
CSS Selector的优先级
</div>
</div>
</div></div></div></div></div></div></div></div></div></div>
此时，第一个串的值是0,1,11,0，第二个串是0,1,0,0。第二位相同，比较第三位，11>0，因此字体显示红色。
有人提出对于那些特殊的selector，如伪类，这个我再查找一下再给结论。
答：
伪类和属性选择与属性值一样，占据第三个位置，即 0,0,1,0
伪元素与一般元素一样，占据第四个位置，即0,0,0,1
继承属性、通配符对特殊性没有任何贡献
因为继承属性没有任何特殊性，所以对于某些元素继承的属性可能不会生效，原因是浏览器本身也有自己的样式表，比如超链接元素（a），可能:link会是蓝色，此时如果你不对a做专门的样式配置，那么它就会使用浏览器的样式。
有的时候，网站编程人员的样式表会与读者的样式表冲突，此时也有一个权重顺序。由大到小为：
1. 读者的重要声明
2. 开发人员的重要声明
3. 开发人员的正常声明
4. 读者的正常声明
5. 浏览器声明
- 大小: 22.6 KB
分享到：
相关推荐
selenium css selector 定位详解
CSS Selector 生成器
css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块：CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act
$ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) . use ( selectorNamespace ...
有很多的新手朋友们可能都不知道CSS selector:div.title p代表的是什么意思， 其实就是满足三个条件的元素会被css渲染，不会的朋友可以参考下
CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。 资源文档贡献报告问题，并在Symfony主存储库中发送拉取请求CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。 资源文档贡献报告问题，...
npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const transform = selectors => { selectors . walk ( selector => { // do something with the ...
要使用CSS Selector Helper for Chrome:trade_mark:，请按照以下步骤操作（在视频中也是如此）：1）将扩展程序安装到chrome浏览器中。 2）检查页面上的元素，或在开发工具的“元素”页面上选择一个元素。 3）导航到...
扩展开发工具和上下文菜单，添加一个显示DOM元素的CSS路径的边栏。 找到页面上任何元素的唯一选择器。 它会找到一个最佳的选择器，这对选定的元素是唯一的。用鼠标右键单击元素并选择复制Css选择器菜单项到缓冲区，...
grunt-css-selector-limit Grunt插件，用于检测集合中的任何CSS文件是否具有比IE的4095限制更多的选择器。包装。入门这个插件需要~0.4.2 如果您以前从未使用过 ，请务必查看《指南》，因为它说明了如何创建以及安装...
很好的WebDriver 元素选择参考，对比展示了使用Xpath Css 等方法选取页面元素 对自动化测试人员很实用
用CSS Selector Tester快速测试你的CSS选择器！在选择器文本字段中创建或复制选择器，匹配的HTML元素将突出显示并计数。确保你的CSS选择符与你打算的元素匹配！ 1.3.3 - 小错误修复，固定图标。 1.3.2 - 小错误修复...
快速，轻松，强大CSS选择器生成。 与通过HTML进行挖掘相比，此扩展使在网页上找到合适CSS选择器更加快捷，容易。 1）将此扩展程序安装到chrome浏览器。 2）检查页面上的元素，或在Chrome浏览器开发工具的“元素”...
kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6 /chrome/firefox/opera/safari， 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑， 查询速度远胜于Szizzle, nwmatcher, ...
use Symfony\Component\CssSelector\CssSelector; use Symfony\Component\CssSelector\CssSelectorConverter; use Symfony\Component\CssSelector\Exception\ExceptionInterface; use TijsVerkoyen\...
基于Python pyqt5的HTTP测试工具源代码，可使用HTTP GET、POST、PATCH、DELETE方法测试网站，可使用正则表达式、XPATH、CSS selector匹配文本
CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。资源资源并在学分该组件是Python cssselect库的端口，该库以BSD许可证分发。
为鼠标悬停元素创建唯一CSS选择器的JavaScript对象。 为鼠标悬停元素创建唯一CSS选择器的JavaScript对象。 支持语言:English
前端开源库-css-selector-extractCSS选择器提取，从CSS代码中提取特定的CSS选择器
从Chrome Devtools元素面板生成CSS选择器 易于使用的Devtools侧栏，可帮助查找唯一CSS选择器。 -在“ Devtools元素”面板中更改选择时，会连续生成唯一CSS选择器。-高度可配置。 可以轻松地以交互方式更改设置，并...