CSS选择符及优先级计算

╰半橙微兮° 2022-08-04 15:47 128阅读 0赞

行内样式（Inline Style），如<span style="color:red">...</span>；  
ID选择符（ID selectors），如\#myid；  
类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class \{...\}、\[href$=dudo.org\]、:hover；  
类型（elements)、伪类型选择符(pseudo-elements)，如 p \{...\}、:first-line \{...\}；

他们的优先级怎么来测量呢？如前所述，它们每一类都有不同的数值表示，其中：  
行内样式为：1000  
ID选择符为：0100  
类选择符为：0010  
类型选择符为：0001  
这里要指出的是，所有这些数值都不是10进制数字，1000只是代码，它是一个行内样式，

例如，body \#wrap p \{...\}，那么它的优先级指数就是 1+100+1=102，而body div \#wrap p \{...\}的优先级指数就是 1+ 1 +100 + 1 =103。  
再看一下其它的例子：   
\* \{ \} 0   
li:first-line \{ \}      2 (one element, one pseudo-element)   
ul ol+li \{ \}           3 (three elements)   
ul ol li.red \{ \}     13 (one class, three elements)   
style=””        1000 (one inline styling)   
div p \{ \}                2 (two HTML selectors)   
div p.sith \{ \}      12 (two HTML selectors and a class selector)   
body \#darkside .sith p \{ \}    112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

看这段代码：  
<html>  
<head>  
<style type="text/css">  
       \#wrap \#content \{color: blue;\}   
       \#content \{color: red;\}   
</style>  
</head>  
<body>  
<div id="wrap">  
      <div id="content">this is a text here</div>  
</div>  
</body>  
</html>  
代码将显示蓝色。

源引：http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS选择器及优先级

转自CSS优先级的计算公式：[http://wyz.67ge.com/css-selector-priority/][http_wyz.67ge.com_css-selecto

た入场券/ 2023年08月17日 17:20/ 0 赞/ 21 阅读

相关【css】selection选择符

`::selection`选择器用来匹配元素被用户选中的部分，常用于改变文本的默认的选择中样式. [codepan在线示例][codepan] 了解更多 ![在这里插入

梦里梦外;/ 2022年12月25日 15:58/ 0 赞/ 136 阅读

相关 [CSS]CSS选择符有哪些？CSS中哪些属性可以继承？优先级算法如何计算？

一、CSS选择符有哪些？ id class . 标签 div p 相邻 ul+div 子 ul>li

素颜马尾好姑娘i/ 2022年11月26日 06:57/ 0 赞/ 183 阅读

相关 CSS 选择器（选择符）

CSS 选择器（选择符）要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制

￡神魔★判官ぃ/ 2022年08月27日 08:51/ 0 赞/ 233 阅读

相关 CSS选择符及优先级计算

行内样式（Inline Style），如<span style="color:red">...</span>； ID选择符（ID selectors），如\myid；

╰半橙微兮°/ 2022年08月04日 15:47/ 0 赞/ 129 阅读

相关 CSS3 选择符

一、元素选择符 <table> <thead> <tr> <th align="left">selector</th> <th align="l

柔光的暖阳◎/ 2022年05月27日 05:55/ 0 赞/ 147 阅读

相关 css选择器优先级

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准： ![css选择器优先级][css] ，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。文

约定不等于承诺〃/ 2022年05月15日 17:59/ 0 赞/ 254 阅读

相关【CSS】组合选择符

CSS 组合选择符 ![在这里插入图片描述][20190201181742218.png] CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了

小咪咪/ 2022年03月21日 12:52/ 0 赞/ 192 阅读

相关 CSS选择器优先级

规则1： id选择器 > class选择器 > 标签选择器规则2：行内样式 > 内部样式 == 外部样式 > 注： > > 1. 选择器相同的情况下，离

野性酷女/ 2022年01月28日 22:41/ 0 赞/ 287 阅读

相关 CSS 组合选择符

在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分

野性酷女/ 2021年09月15日 06:14/ 0 赞/ 268 阅读