[css] 说说CSS的优先级是如何计算的?

haizhilin2013
2019-05-09 04:45:29 星期四
css
                    
                        
说说CSS的优先级是如何计算的?
Comments per page
< Page 1 / 2 >
xiangshuo1992 2019-05-09 01:43:25

发现之前已经思考了这个问题,今天刚好回顾复习一下。
原文链接:https://xiangshuo.blog.csdn.net/article/details/52749250

以下是回答:

选择器种类

严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入 style="" 的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起,所 以就有了5种或6种选择器了。

三种基本的选择器类型
语法如下:
◆标签名选择器,如:p{},即直接使用HTML标签作为选择器。
◆类选择器,如.polaris{}
◆ID选择器,如#polaris{}

伪类,属性选择器特指度等同于类
伪元素特指度等同于标签名选择器

扩展选择器
◆后代选择器,如 .polaris span img{},后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
◆群组选择器,如 div,span,img{},群组选择器实际上是对CSS的一种简化写法,只不过把有相同定义的不同选择器放在一起,省了很多代码。

特指度-优先级计算

我们需要引入一个概念——特指度(specificity)。特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。
这个计算叫做“I-C-E”计算公式,

I——Id;
C——Class;
E——Element;

即,针对一个css选择器表达式,遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1。

下面举几个css表达式的特指度计算结果,大家也自己算一算,是不是对的:
这里写图片描述

还有一个重点要注意:!important 优先级最高,高于上面一切。* 选择器最低,低于一切。

后代选择器的定位原则

在这里介绍一下对于后代选择器,浏览器是如何查找元素的呢?

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如div#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找html中所有 class='red'span 元素,找到后,再查找其父辈元素中是否有 p 元素,再判断 p 的父元素中是否有 iddivBoxdiv 元素,如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

简洁、高效的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:

◆不要在ID选择器前使用标签名
一般写法:div#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上 div 反而增加不必要的匹配。

◆不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:

p.red{color:red;}  
span.red{color:#ff00ff} 

如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写。

◆尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}

◆使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}


参考文章:
1.http://www.cnblogs.com/wangfupeng1988/p/4285251.html
2.http://www.cnblogs.com/iloveyoucc/archive/2012/09/06/2673003.html

hbl045 2019-05-09 01:49:22

css的优先级,还有另外的判定。在css的计算规则中,不仅关注元素的继承、元素声明的特殊性和元素本身来源。这些都是会影响一个css的优先级的判断。并不是说id选择器就一定是最优先,可能还有其他更高级的排序。
详情在下面的网站可以观看
https://www.cnblogs.com/wangmeijian/p/4207433.html

AnsonZnl 2019-05-09 06:40:42

就像楼上兄弟说的,优先级计算中受到影响的因素很多,常用的来说就是:

!important>id>class>tag>*
tzjoke 2019-05-28 16:12:37
Vi-jay 2019-07-29 08:41:54

!important>内联>id>class>tag>通配符

Konata9 2019-08-07 14:23:32

!important > 内联样式(1000) > id 选择器(100) > class 选择器(10) > tag(1) > *

当有多个选择器在一起时,权重相加计算。

对于 CSS 选择器的写法不建议超过 3 层。

blueRoach 2020-06-16 03:05:48

!important > 内联样式 > ID > CLASS > element > *

smile-2008 2020-09-23 01:24:29

!important>id>class>tag>*

amikly 2021-11-10 18:05:25

!important > ID选择器 > 类选择器,属性选择器,伪类 > 类型选择器,伪元素

Iambecauseyouare 2023-03-08 05:11:29

!import > 内联 > id > class > tag > * >继承样式

Comments per page
< Page 1 / 2 >
排行榜
今日答题答题排行
    未答的题
    更多>
      【关注作者公众号】 以面试驱动学习--前端剑解
      【公众号推荐】 不折腾的前端和咸鱼有什么区别

      学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

      【关注官方公众号】 每天4:30-5:00推送
      【公众号推荐】 一起折腾前端算法
      【微信学习群】 备注3+1