CSS2.0层叠样式表—CSS继承和优先级

来聊前端

于 2023-08-06 11:20:02 发布

阅读量118

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36893834/article/details/132128886

版权

CSS继承和优先级

学习目标

在这里插入图片描述

CSS的继承

继承是CSS的一个主要特征，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

示例：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                color:yellow;
            }
        </style>
    </head>
    <body>
        <p>
            我的颜色会被改变
        </p>
    </body>
</html>

但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                color:yellow;
                border:1px solid red; /*边框属性不能被继承*/
            }
        </style>
    </head>
    <body>
        <p>
            我的颜色会被改变
        </p>
    </body>
</html>

可以被继承的css属性

1.字体系列属性:font、font-family、font-weight、font-size、fontstyle;
2.文本系列属性:
2.1 内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符强制转为大写，lowercase转小写，capitalize首字符强制转为大写);
2.2 块级元素：text-indent、text-align;
3.元素可见性：visibility
4.表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）;
5.列表布局属性：list-style
不可以被继承的css属性

1.display：规定元素应该生成的框的类型；
2.文本属性：vertical-align、text-decoration(用于设置文本的修饰线外观包括上/下划线，管穿线，删除线，闪烁 );
3.盒子模型的属性：width、height、margin、border、padding;
4.背景属性：background、background-color、background-image;
5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;

CSS的优先级

在学习CSS优先级之前我们先来了解一个概念权重。

权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。

权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。

CSS中的权重：

每一个CSS的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”。
CSS通过CSS选择器的权重占比，来计算CSS选择规则的总权值，从而确定定义样式规则的优先级次序。
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，样式表中的特殊性描述了不同规则的相对权重。

CSS优先级规则：

CSS选择规则的权值不同时，权值高的优先。
CSS选择规则的权值相同时，后定义的规则优先。
CSS属性后面加 !important 时，无条件绝对优先。

权值等级划分，一般来说是划分5个等级：

内联样式，如 style=“”，权值为 1,0,0,0。
ID选择器，如 #id=“”, 权值为 0,1,0,0。
class | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0。
标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1。
通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0。

权值计算公式：

权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数。

权值比较规则：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。例如你有11个Class选择器控制颜色改变那么权值是110，权值超过了ID选择器的100，那我就应该应用class类型的样式吗？那肯定不是的，我们还是会应用ID选择器的样式。所以一定注意他们之间并不是简单的相加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        /*给body的所有内容加上样式*/
        body{
            color: crimson;
            border: 2px solid;
            border-color: aqua;
        }
        /*子类有设置样式就用子类的，没有就继承了父类的*/
        p{
            color: red;
        }
        #s2{
            color: blue;
        }

        /*不能被继承,它会用自己的边框，而不会用父类的边框*/
        p{
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="c1" id="s1">
    div
    <div class="c2" id="s2">
        <div class="c3" id="s3">苍茫的天涯是我的爱</div>
        <p>火辣辣的太阳</p>
    </div>
    <p>哎呀呀哎呀呀呀</p>
</div>
<div>hello haiyan</div>
<p>nis</p>
</body>
</html>

总结：

先从高等级进行比较，高等级相同时，再比较低等级的，以此类推。
完全相同的话，就采用后者优先原则（也就是样式覆盖）。
CSS属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）。

课程总结

在这里插入图片描述

来聊前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS2.0层叠样式表—CSS继承和优先级

继承是CSS的一个主要特征，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。示例：可以被继承的css属性1.字体系列属性:font、font-family、font-weight、font-size、fontstyle;2.文本系列属性:2.1 内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符
复制链接

扫一扫