css-样式的继承与选择器的权重

最新推荐文章于 2022-07-29 15:23:01 发布

debaowang

最新推荐文章于 2022-07-29 15:23:01 发布

阅读量467

点赞数 1

本文链接：https://blog.csdn.net/Claming_D/article/details/107377028

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

0x01 样式的继承
- 1.1 什么是样式的继承
- 1.2 设计的目的
0x02 选择器的权重
- 2.1 选择器权重的由来
- 2.1 选择器权重说明

本文内容：css-样式的继承与选择器的权重

0x01 样式的继承

1.1 什么是样式的继承

样式的继承就是我们为一个元素设置的样式同时会应用到它的后代元素上.可以看出样式的继承是发生在祖先与后代之间的。

1.2 设计的目的

继承的设计是为了方便我们开发，利用样式的继承我们可以将一些通用的样式统一设置到共同的祖先元素上，那么设置一次所有的后代元素都具有该样式。

注意：并不是所有的样式都会被继承。比如，和背景相关的，布局相关等，这些样式不会被继承。

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        p{
            color: red;
            background-color: orange;
        }

        div{
            color: yellowgreen
        }
    
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>

    <span>我是p元素外的span</span>

    <div>
        我是div
        <span>
            我是div中的span
            <em>我是span中的em</em>
        </span>
    </div>
</body>
</html>

执行效果：
在这里插入图片描述

0x02 选择器的权重

2.1 选择器权重的由来

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。

2.1 选择器权重说明

选择器	权重
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

说明：

1. 0，0，0，0:左边是高位，右边是低位，表格中权重的大小由高到低依次排列
2.比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
3.选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
4.如果优先级计算后相同，此时则优先使用靠下的样式，即下方的代码会将上方的代码效果覆盖
5.可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：在开发中!important一定要慎用！

代码演示1.
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示

<head>
	<style>
	/* 权重：0,1,0,1 */
	         div#box1 { 
	             color: brown;
	         }
	
	         /* 权重：0,1,0,0 */
	         #box1{
	             color: chartreuse;
	         }
	</style>
</head>
<body>
    <!-- 显然，div#box1的权重大于#box1 -->
    <div id="box1">
    我是一个div 
    <span>我是div中的span</span>
    </div>
</body>

执行效果：
在这里插入图片描述

代码演示2.
样式的继承没有优先级

<head>
	<style>
		span{
	       color:blue;
	   }
		div{
	          color: red;
	   	}
	
	   
	</style>
</head>

在这里插入图片描述
代码演示3.
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级

<style>
	#box1{ color:blue;}
     
    div{
        color: red !important;
    }
</style>

执行结果：
在这里插入图片描述

本文到此结束！