css声明的优先级

最新推荐文章于 2022-04-23 11:37:13 发布

wll_blogs

最新推荐文章于 2022-04-23 11:37:13 发布

阅读量338

点赞数 1

分类专栏： css3 文章标签： css优先级 css继承性 css权重 css重要声明 css表现形式

本文链接：https://blog.csdn.net/wll_web/article/details/103457635

版权

css3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

css声明的优先级

1.css样式的三种表示方式
2.css中的重要声明
3.css的权重
4.css继承
5.css的样式来源
6.css的层叠性

1.css样式的三种表示方式

内联式（行内、行级）：

<div style="width:100px;height:100px"></div>

嵌入式(内部head标签里的style)：

<style>
  div{
    width:100px;
    height:100px;
  }
</style>

外联式(外部引用)：

<link rel="stylesheet" type="text/css" href="css/common.css">

样式类型的优先级：内联式>嵌入式>外联式。（比如：3种类型都存在同一属性color，最后页面的效果呈现的是优先级最高里面的color，会覆盖掉优先级低的）。

2.css中的重要声明

有时某个声明比较重要，超过了所有其他声明，就称之为重要声明，用!important标记。
css代码：

	div{background:red;}
	#box{background:blue;}

HTML代码：

	<div id="box" style="width:100px;height:100px"></div>

页面效果：
无!important
添加!important：

    div{background:red !important;}
	#box{background:blue}

页面效果：

如果一个元素多个选择器设置了相同的样式，带有!important的样式会覆盖跳其他相同的样式。

注意：!important 总是要放在声明的最后，即结束分号之前，否则声明无效。

3.css的权重

权重决定了你css规则怎样被浏览器解析直到生效。css权重关系到你的css规则是怎样显示的。
权重计算规则：

重要声明!important，权重无穷大。
内联样式，如style=""。权重为1,0,0,0。
ID选择器，如:#box，权重为0,1,0,0。
类，伪类和属性选择器，如：.content ::hover和[attr]，权重为0,0,1,0。
元素选择器和伪元素选择器，如:div和::before，权重为0,0,0,1。
通配符(*)，子选择器(>)，相邻选择器(+)等的权重为0,0,0,0。
继承的样式没有权重。
结合符(,)对选择器特殊性没有一点贡献。

标志为!important的声明并没有特殊的特殊性值(权值)，不过要与非重要声明分开考虑；
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决；
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决；
如果一个重要声明与非重要声明冲突,胜出的总是重要声明。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>权重</title>
  <style>
   #wrap > .inner{background:red}
   #wrap > #box{background:yellow}
   #wrap > [inner]{background:pink}
   #wrap > div{background:white}
   .inner{background:blue}
   #box{background:green}
   [inner]{background:gray}
   .inner .aa .bb .cc .dd{background:black}
  </style>
 </head>
 <body>
   <div id="wrap">
	<div class="inner aa bb cc dd" id="box" inner="inner" style="width:100px;height:100px;border:1px solid"></div>
   </div>
 </body>
</html>

每个选择器都是设置id为box的背景颜色，你知道最终是什么颜色吗？
答案是：
权重背景
只要你懂得权重的计算规则，自己就能很快的得到结果：

   #wrap > .inner{background:red} /* 权重：0110 */
   #wrap > #box{background:yellow} /* 权重：0200 */
   #wrap > [inner]{background:pink} /* 权重：0110 */
   #wrap > div{background:white} /* 权重：0101 */
   .inner{background:blue} /* 权重：0010 */
   #box{background:green} /* 权重：0100 */
   [inner]{background:gray} /* 权重：0010 */
   .inner .aa .bb .cc .dd{background:black} /* 权重：0050 */

#wrap > #box的权重最大，所有它的优先级最高。如果两个选择器的权重相等，以后出来的选择器为准。

权重为1000的选择器大于所有以0开头的选择器权重(不进位)；
选择器的特殊性最终都会授予给其对应的声明；
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势；
注意：id选择器和属性选择器：div[id=“box”]（0011）和 #box（0100）。

4.css继承

在css中可以继承的属性有很多，比如color，background等：
css代码：

#wrap{color:red}

HTML代码：

   <div id="wrap">
	<div class="box">属性继承</div>
   </div>

页面效果：
属性继承
文字在.box这个div中，我们并没有设置它的样式，只设置了它的父元素，为什么这样也有效果呢？
打开调试器我们可以看见：

该样式是从父元素身上继承下来的，继承下来的样式属性没有权重，只要随便给这个元素设置个颜色都能覆盖继承下来的样式。

注意：继承没有权重，甚至连权重为0都没有，选择器权重为0都会覆盖继承下来的样式。

5.css的样式来源

css样式的来源大致有三种：创作人员(开发者)，读者(用户)，用户代理(浏览器)。
权重分为：

读者的重要声明。
创作人员的重要声明。
创作人员的正常声明。
读者的正常声明。
用户代理的声明。

优先级关系：读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理的声明。

6.css的层叠性

找出所有相关的规则，这些规则都包含一个选择器。
计算声明的优先级：先按来源排序->再按选择器的特殊性排序->最终按顺序。

wll_blogs

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css声明的优先级

css声明的优先级1.css样式的三种表示方式2.css中的重要声明3.css的权重1.css样式的三种表示方式内联式（行内、行级）：<div style="width:100px;height:100px"></div>嵌入式(内部head标签里的style)：<style> div{ width:100px; heig...
复制链接

扫一扫

专栏目录