【自学CSS笔记】CSS的三大特性——层叠性，继承性与优先级

最新推荐文章于 2024-04-08 21:15:07 发布

deidei~~

最新推荐文章于 2024-04-08 21:15:07 发布

阅读量913

点赞数 1

分类专栏： CSS3 学习感悟文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_51843898/article/details/128652540

版权

学习感悟同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的三大核心特性：层叠性解决了样式冲突问题，遵循就近原则；继承性允许子元素继承父元素的部分样式，简化代码；优先级则规定了不同选择器的权重，类选择器优先级高于标签选择器。通过理解这些特性，开发者能更好地控制和组织网页样式。

摘要由CSDN通过智能技术生成

简介：CSS全称为“层叠样式表”，如果说html是网页界面的骨架，那么CSS就是骨架的衣服，通过选择器来给html文件中的元素“化妆”。CSS有三个非常重要的特性：层叠性、继承性与优先级。本篇文章介绍了这三个特性，以及开发者在使用CSS时关于这三个特性需要注意的地方。

前言

CSS有三大非常重要的特性：层叠性，继承性与优先级。

一、层叠性

在学习前端的过程中你是否曾经有过这样一个疑问：如果相同的选择器同时针对同一个属性设计不同样式，那么在页面上展示出来的又是哪一个样式呢？
比如说如下代码，在style中有两个div选择器，设置了不同的颜色，"Hello,我是一个div！"应该显示什么颜色呢？

<!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>CSS三大特性t</title>
    <style>
        div{
            color:coral;
        }
        div{
            color:hotpink;
        }
    </style>
</head>
<body>
    <div>Hello，我是一个div！</div>
</body>
</html>

运行结果如下：

如此可见，显示了下面那个div的样式。

CSS的层叠性指出：
相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一种冲突的样式。层叠性主要解决样式冲突的问题。
若出现样式冲突：（如上面的例子）则遵循就近原则，哪个样式离结构近，就执行哪个样式。
若样式不冲突： 则不会层叠。

打开浏览器的“检查”我们也可以发现页面最终就近选择了哪一个属性呈现在页面上：检查界面
我们发现我们写在离这个div远的地方的color:coral被划掉了，由此可见，浏览器选择了离他更近的hotpink。
不过这边要注意，下面的div只覆盖样式冲突的情况，如果我们给上面的div选择器中加上“font-style:700”，则页面上的文字依旧会加粗，不会因为离他远就不显示。

二、继承性

现实中的继承： 我们继承了父亲的姓。
CSS中的继承： 在CSS中，子标签会继承父标签的某些样式，比如说：文本的颜色和字号。简单的理解就是：子承父业。

且看如下代码：html中，p标签是div的孩子，我们在style中给p的父亲div指定了color、font-weight和font-size属性，则p也会继承这些属性。

<!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>CSS三大特性</title>
    <style>
        div{
            color:coral;
            font-weight: 700;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <p>Hello！我是div的孩子！</p>
    </div>
</body>
</html>

显示如下所示：
继承性运行结果
我们发现确实“子承父业”。
同样我们来检查一下浏览器的调试工具。

我们发现，在浏览器的调试功能下确实在p的样式下面表明了：“inherited from div”，说明是继承了div的属性。
利用CSS的继承性，我们可以在一个容器的所有子标签都需要同一个样式的时候只给父亲的选择器写属性，这样就不必给每一个子元素一一写一遍了，大大减少了代码的冗杂程度。
然而，并不是所有的样式都具有继承性，有些属性是子元素继承不了的。

子元素可以继承的样式有：text-，font-，line-这些元素开头的，以及color属性。
但是比如说像height，width和内外边距相关属性就不会继承。

不过关于“line-height”属性的继承，如果对父元素指定行高的时候用的是：“font:12px/1.5 Microsoft YaHei”这样的写法，则表示设置当前行高为字体大小的1.5倍，在子元素继承的时候，不会继承死的行高18px，而是会根据子元素中设置的字体大小自动调整行高为子元素中字体大小的1.5倍。这样更为灵活的调整了子元素中的行高。

三、优先级

那么若是对于同一个元素我们用不同的选择器进行样式的指定，最终页面会如何来显示呢？
我们且看下面这段代码：
在代码中，我们同时在style中对下面这个div元素用标签选择器和类选择器进行选择，其中color这个样式有冲突，我们来看看页面会怎样显示。

<!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>CSS三大特性</title>
    <style>
        div{
            color:coral;
            font-weight: 700;
            font-size: 30px;
        }
        .text{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <div class="text">Hello！</div>
</body>
</html>

显示结果如下：

我们会发现，标签选择器中设置的font-style和font-size依旧是起作用，但是color却不起作用了，而是显示了类选择器中的样式。这就是因为类选择器比标签选择器优先级更高的缘故。所以在样式产生冲突时，优先选择类选择器中的样式。
当同一个元素指定多个选择器的时候，就会有优先级产生：

若选择器相同，则执行层叠属性，距离近的优先显示。
若选择器不相同，则按照下面表格中的选择器权重优先级进行显示：

这张表展现出了选择器的权重，由上到下，权重依次增大。权重大的选择器在样式发生冲突时优先显示。

优先级的注意点：
·权重是有4组数字组成，但是不会有进位，四个数字互不干涉。
·可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
·等级判断从左往右，如果某一位数值相同，则判断下一位数值。
·继承的权重是0，如果该元素没有被选择器直接选中，不管父元素权重多高，子元素得到的权重都是0。

四、优先级权重的叠加

权重叠加： 如果是复合选择器，则会有权重的叠加，需要计算权重。
如下为示例代码，在代码中，对于所有<li>中的元素都本应该继承ul的样式，但是继承的权重对于子元素来说为“0,0,0,0”，而全局还同时被“ul li”（元素选择器+元素选择器）和“.BigCat li”（类选择器+元素选择器）选中了，前者权重和为两个选择器权重各位相加：0,0,0,2；后者权重为:0,0,1,1。从权重的第一个数字开始比较，发现后者更大，所以显示后者样式。
但是第一个<li>元素“喵”比较特殊，他还单独被id选择器选中了，“ul #cat”这个选择器的权重和为:0,1,0,1，比".BigCat li"还要大，所以第一个“喵”，就显示了“ul #cat”指定的样式。

<!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>CSS三大特性</title>
    <style>
         /*元素选择器*/
        /* 计算权重为：0,0,0,1，对于子元素：0,0,0,0*/
        ul{  
            color:aquamarine;
        }
        /*元素选择器+元素选择器*/
        /* 计算权重为：0,0,0,1+0,0,0,1=0,0,0,2 */
        ul li{
            color:blue;
        }
        /*元素选择器+id选择器*/
        /* 计算权重为：0,0,0,1+0,1,0,0=0,1,0,1 */
        ul #cat{
            color:gold;
        }
        /* 计算权重为：0,0,1,0+0,0,0,1=0,0,1,1 */
        .BigCat li{
            color:red;
        }
    </style>
</head>
<body>
    <ul class="BigCat">
        <li id="cat">喵</li>
        <li>咪</li>
        <li>呃咪</li>
    </ul>
</body>
</html>