[知乎]关于选择器优先级的计算

标签： 知乎 选择 计算 | 发表时间：2013-11-25 14:06 | 作者：蓝飞
出处：http://www.clanfei.com/

“ 探寻真理者不可心存傲慢”，再一次给自己敲响警钟。

曾经以为 CSS的优先级不过如此，虽然自己列不出（主要是不喜欢死记理论）所有CSS选择器的优先级顺序，但我在写代码的时候一定能够写对，所以一直看轻了它，直到今天遇到了这样一个问题：

  
       
  1. <!doctype html>

    2.    
  2. <html lang="en">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>CSS Selectors Level</title>

    6.    
  6. 	<style type="text/css">

    7.    
  7. 	.inner:not(#outer) p{color: blue;}

    8.    
  8. 	.outer .inner p{color: orange;}

    9.    
  9. 	</style>

    10.    
  10. </head>

    11.    
  11. <body>

    12.    
  12. 	<div class="outer">

    13.    
  13. 		<p>outer</p>

    14.    
  14. 		<div class="inner">

    15.    
  15. 			<p>inner</p>

    16.    
  16. 		</div>

    17.    
  17. 	</div>

    18.    
  18. </body>

    19.    
  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.    
  2.   color: red; /* 优先级:a=0,b=1,c=1 */

    3.    
  3. }

    4.    
  4. 

    5.    
  5. .test{

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

    7.    
  7. }

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

例2：

  
       
  1. div[class].main a{

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

    3.    
  3. }

    4.    
  4. 

    5.    
  5. body div a[href]{

    6.    
  6.   color:blue;/* 优先级:a=0,b=1,c=3 */

    7.    
  7. }

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

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

练习题：

请问以下代码最终显示为什么颜色，优先级分别是多少？

CSS选择器练习题

以上内容转自 知乎，感谢知乎，大赞一丝大大。

相关 [知乎 选择 计算] 推荐：

[知乎]关于选择器优先级的计算

- - 蓝飞技术部落格
“ 探寻真理者不可心存傲慢”，再一次给自己敲响警钟. 曾经以为 CSS的优先级不过如此，虽然自己列不出（主要是不喜欢死记理论）所有CSS选择器的优先级顺序，但我在写代码的时候一定能够写对，所以一直看轻了它，直到今天遇到了这样一个问题：. 为啥 :not伪类选择器的优先级会比 类选择器还高. 搜索了一下，发现了知乎上 @一丝大大的一篇回答.

结婚该选择一个什么样的人? - 知乎

- -
作为一个奔四的过来人，有些大实话，可能身边的人不会跟你说. 但我想掏心掏肺的跟你说一个保命择偶建议：. 这个建议是啥呢，就是：看这个男人的心智成熟度. 当遇到有难度，不好解决的事情，或者事业低谷期，他的第一反应是什么. 是把责任都推给你，冷战、埋怨、指责. 还是他能很平静的跟你在一起，一起来解决问题.

优秀英语教材的选择 - 知乎

- -
本人是个学生，依照自己学习英语的经历发表一些浅见. 请各位不要将以下内容做商业用途. 1、在我看来，简单地评判一本英语教材是否优秀，可以观察以下几点：1. 是否是英美出版社出版（或英美引进）. 1：CEFR是最重要的欧洲各语言标准，分为A1-C2六个等级，若不清楚可以上网查一下. 教材若没有明确指出，则教材要么落伍20年以上，要么就不符合常规的CEFR大纲的英语教学，对于一般学生来说不选为妙.

女生学计算机，没出路吗？ - 知乎

- -
你若问我，妹子学计算机是不是更难，我会说：是. 我用血泪的教训提醒你：妹子学计算机，不要想着自己的性别. 这是我能想到的，给你最好的建议. 如果总想着自己是个妹子，只有一个后果：遇到事就想利用性别找男生帮忙. 我也不要什么面子了，明确的告诉你，我就是这么过来的. 现在追悔莫及，如果让我重新学习，我一定凡是亲力亲为，因为当初走的捷径，现在全还回来了.

【重磅】GluonCV—基于MXNet的计算机视觉库 - 知乎

- -
2018-04-26，分布式机器学习社区（DMLC） 发布了两个深度学习工具箱 GluonCV 和 GluonNLP，它们分别为计算机视觉和自然语言处理提供了顶级的算法实现与基本运算. 本文主要介绍GluonCV，并提供了安装和基本使用示例. GluonCV提供了计算机视觉领域最先进的（SOTA）深度学习算法的实现.

一次性给你500万，或每月给你三万，直到你去世，你选择哪个？ - 知乎

- -
这差不多是道本科金融学期末考试题，抽象一下就是每月3万永续现金流的现值与500万相比孰高孰低，考点就是永续现金流的贴现. 永续现金流现值=每期支付金额/利率. 当现值为500万时，利率为3/500=0.6%. 换句话说，若你能稳定获得月利率0.6%，则500万和每月3万是完全等价的. 对呀，是废话呀，500*0.6%不就是3吗，500万每月能生出3万来的话，那就完全一样了……真的是这样吗.

2022 年大规模裁员后，计算机专业会成为下一个土木吗？ - 知乎

- -
现在的大部分小程序员呀，题做得是够了，就是年龄小了，网也上晚了，我来给你讲点过去的故事你就大概有数了. 我也没有给你分析寰宇国际经济形势的能力，只是用我个人的经历给大家说一下为什么计算机的发展和土木这种专业有本质性的不同. 我个人经历参考价值业有限，如果有更深刻的理解也很欢迎大家分享. 我05年考上哈工大，当时上计算机学院分数是整个录取段吊车尾的，我记得很清楚当时是我把机械，自动化和土木都填在前面了，结果一个都没给我，录取书发家里我打开一看计算机科学与技术，我傻眼了，这是学啥的.

转载 选择

- bravusliu - caowumao的博客

CSS4 选择器

- iVane - 幸福收藏夹
CSS3 还没完全用上，CSS4 已经提上日程. 官方发布了 update to the working Selectors Level 4 spec，对选择器做了一些升级. 前端最大的优点就是技术更新快，可以经常学到新东西；最大的缺点也是技术更新快，要跟上潮流还真不是那么简单. 不过，这次更新有像“父选择器”这样让人兴奋的内容，让我们先睹为快，了解一下吧：.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.