CSS 选择器权重计算与优先级

Web前端CSS+HTML 专栏收录该内容
14 篇文章 0 订阅

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

在讲CSS 选择器权重计算与优先级之前,我们先来了解一下CSS是用来干什么的?CSS是用来通过添加样式使网页更加美观,也就是说CSS是利用选择器来美化网页的,使用户可以在网页上更清晰地找到自己需要的东西。

在这里插入图片描述
CSS添加样式的方式:

  • 有内部样式(内部样式就是在html文件中通过标签来添加样式)
  • 外联样式(通过标签将外部的样式css文件引入到html文件中)
  • 还有行间样式,即在元素标签中通过style=" "添加样式;

而添加样式是通过CSS选择器选择指定的标签进行添加的,那么什么是CSS选择器呢?它是怎么起作用的呢?它们之间的优先级是怎样来区别的呢?

样式类型

1、行间样式

就是在一个标签内,直接添加一个 style=‘ ’ ,然后在这里面添加你说需要对标签描述的属性及属性值。格式如下:

<h1 style="font-size:12px;color:#000;">我是行间CSS样式。</h1>

2、内联样式

<head>头部标签中添加 <style type="text/css"> 标签,然后在里面添加对应选择器及其对选择器描述的属性及属性值。格式如下:

<style type="text/css">
  h1{font-size:12px;
      color:#000;
      }
</style>

3、外部样式

单独将对选择器及其对选择器描述的属性及属性值写入到一个css文件中,然后将这个文件以以下方式引入到HTML文件的<head>头部标签中。

<link rel="stylesheet" href="css/style.css">
选择器的种类
选择器表现形式
ID#id,例如:id=“name”,id=“name_txt”
class.class,例如:class=“name”,class=“name_txt”
标签p,例如:body,div,p,ul,l
属性[type=‘text’]
伪类:hover,例如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。
相邻选择器、子代选择器> +,例如:div>p,带大于号>
css的权重

每一个css的选择器都有一个相对的重要程度值,也就是权重的值,简称“权值”。css通过css选择器的权重占比,来计算css选择规则的总权值,从而确定 定义样式规则的 优先级次序;也就是说css选择规则的优先级 是按照 css选择器的权值的比较 来确定的,选择器的权值越大就优先级就高,优先级越高就决定了该元素在页面中的最终呈现的效果。

css权重的计算规则

权值等级划分, 一般来说是划分4个等级:

类型权重
内联样式如: style=" ",权值为1000。
ID选择器如:#name,权值为0100。
class类选择器,伪类和属性选择器如.name,权值为0010。
标签选择器和伪元素选择器如div p,权值为0001。

通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
继承的样式没有权值,通配选择器定义的规则优先级高于元素继承过来的规则的优先级。

!important

!important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。

css优先级规则
  • css选择规则的权值不同时,权值高的选择器优先;
  • css选择规则的权值相同时,后定义的选择器规则优先;
  • css属性后面加 !important 时,无条件绝对优先;

总体来说: !important>行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器,注意: !important规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他对该元素的声明,无论它处在声明列表中的哪个位置。但注意使用!important样式很难调试,因为它改变了你样式本来的权值规则。

权值如何进行比较

当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1000,0,0,0 对应–> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的。

当两个权值进行比较时,从高位到低位逐位进行比较,从高等级开始比较,如果相同等级的权值相同,再继续进行下一个等级的比较。如果不相同,直接应用相同等级权值比较大的选择器对应的样式。而不是把四个等级的权值加起来进行比较。如果某个样式后面加了 !important,则绝对优先,比内联样式更优先。下面就来举例说明一下吧!

案例1:

<div id="box">
	<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box p{
	width:300px;
	line-height: 30px;
	color:#333;
	background:#ccc;
}
div p{
	width:300px;
	line-height: 40px;
	color:#fff;
	background:#f00;
}

执行效果如下:
在这里插入图片描述
在这里插入图片描述

我这里给div中的p进行了两种方式的添加样式(ID选择器+标签选择器、标签选择器+标签选择器),这里根据以上权重值的比较,将第一种方式第一级ID选择器(#box)与第二种方式的第一级标签选择器进行权重比较,因为ID选择器(#box)的权重值为0100,而标签选择器(div)的权重值为0001,所以这里的#boxdiv 优先级要高,网页中显示的就#box p{…}中添加的样式。

案例2:

<div id="box">
	<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
	width:300px;
	line-height: 30px;
	color:blue;
	background:lightgoldenrodyellow;
}
#box p{
	width:300px;
	line-height: 40px;
	color:#fff;
	background:#f00;
}

执行效果如下:
在这里插入图片描述
在这里插入图片描述
我这里给div中的p进行了两种方式的添加样式(ID选择器+类选择器、ID选择器+标签选择器),这里根据以上权重值的比较,将第一种方式的样式添加的第一级ID选择器(#box)与第二种方式的样式添加的第一级ID选择器(#box)进行权重比较,因为两个都是ID选择器,权重一致都是0100,所以我们要对两种方式第二级选择器进行比较,第一种方式的第二级选择器为类选择器(.text)权重为0010,第二种方式的第二级选择器为标签选择器(p)权重为0001,因为(.text)权重要大于(p)权重,所以网页中显示的就#box .text{…}中添加的样式。

案例3:

<div id="box">
	<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
	width:300px;
	line-height: 30px;
	color:blue;
	background:lightgoldenrodyellow;
}
#box p{
	width:300px;
	line-height: 40px;
	color:#fff;
	background:#f00!important;
}

执行效果如下:
在这里插入图片描述
在这里插入图片描述
这里我举的例子跟案例2是大致一样的,但细心的你们可能发现了我给第二种方式的background属性小小的改动了一下,给它添加了一个!important,根据上面css优先级规则的第三条:css属性后面加 !important 时,无条件绝对优先。所以即使第一种整体的权重值比第二种整体的权重值要高,但第二种方式中的background属性添加了 !important 比第一种方式中的background:lightgoldenrodyellow权重要高,所以网页中div的背景色采用的是第二种方式的background属性。

案例4:

<div id="box">
	<p class="text">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
	width:300px;
	line-height: 30px;
	color:blue;
	background:lightgoldenrodyellow;
}
#box .text{
	width:300px;
	line-height: 40px;
	color:#fff;
	background:#f00!important;
}

执行效果如下:
在这里插入图片描述

在这里插入图片描述
从上面css中可以看到两个选择器是一样的,所以它们的权重值是一样的。根据上面css优先级规则的二条:css选择规则的权值相同时,后定义的选择器规则优先,所以网页中显示的是后面定义的#box .text{…}中的样式。

案例5:

<div id="box">
	<p class="text" style="background:blueviolet;line-height: 25px;color:#fff;">CSS 选择器权重计算与优先级</p>
</div>
#box .text{
	width:300px;
	line-height: 30px;
	color:blue;
	background:lightgoldenrodyellow;
}

执行效果如下:

在这里插入图片描述

在这里插入图片描述

上面的例子,我给p标签添加了行间样式,根据css优先级规则: !important>行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器,所以p标签的行间样式地优先级比#box .text{…}要高,页面显示的是p标签的行间样式的效果,又因为p标签的行间样式中没有width这个属性,所以页面显示的是#box .text{…}中width这个属性。也就是说行间样式和相应选择器中都有的属性,优先执行行间样式的属性,没有的属性就在相应选择器中去找。

以上我只对二级选择器之间的权重问题进行了举例说明,多级选择器之间的权重比较是一样的比较方式。


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值