经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
一篇文章带你初步了解—CSS特指度
来源:cnblogs  作者:_Fatman  时间:2021/2/1 11:35:13  对本文有异议

CSS特指度

说明

这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪。

CSS选择器

单个CSS选择器

css选择器决定css样式能渲染到对应的元素上。

元素选择器:
在这里插入图片描述

Class选择器:
在这里插入图片描述
ID选择器:
在这里插入图片描述

多个CSS选择器

浏览器在处理单独的id、class和元素选择器时如何渲染的问题很好理解,但要在两种甚至三种不同选择器同时作用于相同的元素的情况下,浏览器又该如何渲染呢?

比如3个选择器作用在同一个元素身上的例子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>ICE计算公式</title>
  6. <style type="text/css">
  7. #title {
  8. color : blue;
  9. }
  10. .red {
  11. color : red;
  12. }
  13. p {
  14. color : brown;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <p id="title" class="red">这是标题</p>
  20. </body>
  21. </html>

得出结果:
在这里插入图片描述
当3个不同的选择器(ID、Class、元素)同时作用于同一元素上时,浏览器渲染时选择的样式为ID选择器声明的样式,这是因为ID选择器的特指度高于Class选择器,而Class选择器的特指度高于元素选择器......

那么应该怎么计算每个选择器特指度,要解决这个问题,不得不提到ICE计算公式:ID-Class-Element。

ICE计算公式

关于ICE计算公式错误的理解

注:我在过去很长一段时间都是按照这种错误的思想来理解ICE计算公式的,务必注意。

关于ICE计算公式,经常看到这样的说法(这是错误的):

!important ID Class Element
特指度 1000 100 10 1

Element特指度为1,class特指度为10,ID特指度为100,!important为1000。

如果按照这样理解,是不是可以说11个class的特指度为10 * 11 === 110,它是肯定比1个Id的特指度要大的,但在我实践后,我发现不能这样去理解,就比如下面的例子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>11个class是否比1个ID特指度大</title>
  6. <style type="text/css">
  7. #id {
  8. color : green;
  9. }
  10. .class1.class2.class3.class4.class5.class6.class7.class8.class9.class10.class11 {
  11. color: red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p id="id" class="class1 class2 class3 class4 class5 class6 class7 class8 class9 class10 class11">p标签</p>
  17. </body>
  18. </html>

如果按照class特指度为10、id为100的逻辑来理解,110 大于 100,最后p标签的color属性值应该为red,但是实际情况却是:
在这里插入图片描述
标签的color属性值为green。造成这样结果的原因是因为不管有多少个class选择器,Id选择器的特指度就是比class选择器的特指度大。就好比奥运会排名,先比较金牌,金牌数量多者排前面,数量少者排后面,在出现金牌数量相同时才会以银牌的数量来比较。Id选择器就好比金牌,而class选择器就好比银牌。当Id选择器数量不一致时,后续操作压根就不会去比较class选择器,所以class选择器的数量再多,也是无效的。

不同选择器对应的特指度

选择器共有:

  1. ID选择器
  2. Class选择器
  3. 元素选择器
  4. 属性选择器
  5. 伪类选择器
  6. 伪元素选择器

ID选择器

\(\color{#FF3030}{Selector Specificity: (1, 0, 0)}\)

  1. #title {
  2. color : blue;
  3. }

Class选择器

\(\color{#FF3030}{Selector Specificity: (0, 1, 0)}\)

  1. .red {
  2. color : red;
  3. }

元素选择器

\(\color{#FF3030}{Selector Specificity: (0, 0, 1)}\)

  1. p {
  2. color : brown;
  3. }

属性选择器

\(\color{#FF3030}{Selector Specificity: (0, 1, 0)}\)

  1. [id="title"] {
  2. color : black;
  3. }

伪类选择器

\(\color{#FF3030}{Selector Specificity: (0, 1, 0)}\)

注意:p:hover的特指度为 (0, 1, 1),因为它包含了元素选择器和伪类选择器

  1. p:hover {
  2. color: #FF00FF
  3. }

伪元素选择器

\(\color{#FF3030}{Selector Specificity: (0, 0, 1)}\)

注意:p::after的特指度为 (0, 0, 2),因为它包含了元素选择器和伪元素选择器

  1. p::after {
  2. content: "元";
  3. }

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>6种选择器的特指度</title>
  6. <style type="text/css">
  7. #title {
  8. color : blue;
  9. }
  10. .red {
  11. color : red;
  12. }
  13. p {
  14. color : brown;
  15. }
  16. [id="title"] {
  17. color : black;
  18. }
  19. p:hover {
  20. color: yellow;
  21. }
  22. p::after {
  23. content: "元";
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <p id="title" class="red">100</p>
  29. </body>
  30. </html>

其余还有组合选择器、分组选择器、上下文选择器、子元素选择器、相邻兄弟选择器、后续兄弟选择器,但是这几种更像是选择器的组合,它们也都是由上述6种选择器 \(\color{#FF3030}{(ID选择器、Class选择器、元素选择器、属性选择器、伪类选择器、伪元素选择器)}\)组合而成,所以它们的特指度由组成它们的选择器的特指度相加即可获得。

比如:

组合选择符

\(\color{#FF3030}{Selector Specificity: (0, 2, 0)}\)

注意:此处是对Class属性中同时含有red和indigo两个值的元素进行声明,它的特指度为(0, 2, 0)

  1. .red.indigo {
  2. color : brown;
  3. }

分组选择符

\(\color{#FF3030}{Selector Specificity: (0, 0, 1)}\)

注意:此处是对p、em、strong3个元素分别进行声明,而它们3个的特指度都为(0, 0, 1)

  1. p , em , strong {
  2. color : red;
  3. }

上下文选择符

\(\color{#FF3030}{Selector Specificity: (0, 0, 2)}\)

注意:此处是对被包含在p元素中的em元素(\(\color{#FF3030}{此时的em元素可以为p元素的子孙元素}\))进行声明,它的特指度为(0, 0, 2)

  1. p em {
  2. color : red;
  3. }

子元素选择符

\(\color{#FF3030}{Selector Specificity: (0, 0, 2)}\)

注意:此处是对被包含在p元素中的em元素(\(\color{#FF3030}{此时的em元素只能为p元素的子元素}\))进行声明,它的特指度为(0, 0, 2)

  1. p > em {
  2. color : green;
  3. }

相邻兄弟选择符

\(\color{#FF3030}{Selector Specificity: (0, 0, 2)}\)

注意:此处是对与p元素拥有相同父元素的em元素(\(\color{#FF3030}{此时的em元素必须紧跟在p元素的后面}\))进行声明,它的特指度为(0, 0, 2)

  1. p + em {
  2. color : red;
  3. }

一般兄弟选择符

\(\color{#FF3030}{Selector Specificity: (0, 0, 2)}\)

注意:此处是对与p元素拥有相同父元素的em元素(\(\color{#FF3030}{此时的em元素必须在p元素的后面,但不一定紧跟}\))进行声明,它的特指度为(0, 0, 2)

  1. p ~ em {
  2. color : red;
  3. }

特殊情况

没有特指度的继承样式

继承样式不考虑特指度,由下面两个例子能说明:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>继承样式不考虑特指度</title>
  6. <style type="text/css">
  7. .yellow {
  8. color : yellow;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div class="yellow">
  14. <p>p标签</p>
  15. </div>
  16. </body>
  17. </html>

继承样式不考虑特指度-图1
上述例子中p元素的color属性值为red(来自用户样式表),继承自div元素的color属性值yellow被覆盖。

(\(\color{#FF3030}{注:此浏览器的用户样式表被我修改,没有修改过的p元素的color属性的值应该是black。}\))

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>继承样式不考虑特指度</title>
  6. <style type="text/css">
  7. .yellow {
  8. color : yellow;
  9. }
  10. p {
  11. color : green;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class="yellow">
  17. <p>p标签</p>
  18. </div>
  19. </body>
  20. </html>

继承样式不考虑特指度-图2
上述例子中p元素的color属性值为green(来自元素选择器),继承自div元素的color属性值yellow被覆盖。

超脱特指度的 !important

!important是超脱特指度的存在

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>!important是超脱特指度的存在</title>
  6. <style type="text/css">
  7. #id {
  8. color : green;
  9. }
  10. p {
  11. color : brown;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p id="id">p标签</p>
  17. </body>
  18. </html>

!important的特指度是最高的-图1
修改代码,给元素选择器中color属性加上!important后:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>!important是超脱特指度的存在/title>
  6. <style type="text/css">
  7. #id {
  8. color : green;
  9. }
  10. p {
  11. color : brown !important;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p id="id">p标签</p>
  17. </body>
  18. </html>

!important的特指度是最高的-图2
元素选择器中加了!important的声明覆盖了ID选择器中没加!important的声明。

特指度相当时 以 后声明的属性为准

当两个选择器的特指度相当时,特指度相当时 以 后声明的属性为准。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="charset" content="utf-8"/>
  5. <title>特指度相当时 以 后声明的属性为准</title>
  6. <style type="text/css">
  7. p {
  8. color : green;
  9. }
  10. p {
  11. color : brown;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p>p标签</p>
  17. </body>
  18. </html>

在这里插入图片描述
后声明的属性覆盖了先声明的属性。

总结

单个选择器的特指度按照 !important > id选择符 > class选择符、属性选择符和伪类 > 元素选择符和伪元素的规律排序,如果遇到组合选择器,则按其逻辑将其拆分为单个选择器后相加再进行判断。如果选择器中的声明包含了!important,则这条属性会覆盖同属性所有不包含了!important的声明,只有在同属性的声明也包含!important,并且同属性的声明位于的选择器的特指度大于先前的选择器,亦或两个选择器的特指度相当,但同属性的声明位于的选择器位于先前的选择器之后时,才会覆盖先前的选择器的加了!important的属性。

如果上面的话很难理解,可以看这里的:
第一条:比较各自所在的选择器的特指度,特指度越大的优先级越高;
第二条:加了!important的声明的属性优先级最高,在都加了!important的情况下按第一条为准;
第三条:在特指度相等的情况下,后声明的优先级大于先声明的;
第四条:优先级高的样式覆盖优先级低的样式。

原文链接:http://www.cnblogs.com/liujingjiu/p/14342387.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号