什么是继承和选择器的权重

最新推荐文章于 2024-05-19 11:27:40 发布

翘指

最新推荐文章于 2024-05-19 11:27:40 发布

阅读量144

点赞数

分类专栏： html 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_65334415/article/details/127423197

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

样式的继承

选择器的权重：

样式的继承

：我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先和后代之间的

继承的设计时为了方便我们的开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: aqua;
            font-size: 100px;
            font-weight: 200px;
            
        }
    </style>
</head>
<body>
    <p>少小离家老大回
        <span>乡音无改鬓毛吹</span>
    </p>
    <span>hsuiahfuhsduifhuiasdhfu</span>
    
</body>
</html>

继承的设计时为了方便我们的开发

利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设计一次即可让所有的元素都具有该样式，j简化了我们的开发工作

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

选择器的权重：

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就会发生冲突，

发生冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重：

内联选择器： 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式没有优先级

比较优先级的时候，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示（分组选择器是单独计算的）

选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器

如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边都添加important，则此时该样式会获取到最高的优先级，甚至超过内联样式

注意：在开发中一定要慎用！因为修改起来会比较麻烦

翘指

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
什么是继承和选择器的权重

利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设计一次即可让所有的元素都具有该样式，j简化了我们的开发工作。比较优先级的时候，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示（分组选择器是单独计算的）样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就会发生冲突，元素选择器 0,0,0,1。通配选择器 0,0,0,0。因为修改起来会比较麻烦。内联选择器： 1,0,0,0。
复制链接

扫一扫