CSS基础学习——CSS的三大特性

@ Salt

已于 2022-01-24 22:28:05 修改

阅读量517

点赞数

分类专栏： CSS 文章标签： css 前端 css3

于 2022-01-24 22:01:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61920612/article/details/122673719

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文深入讲解CSS的三大核心特性：层叠性、继承性和优先级。解析如何利用这些特性优化样式表，提升网页布局效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. CSS的三大特性

css有三个非常重要的特性：层叠性、继承性、优先级

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

1.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
请添加图片描述

恰当地使用继承可以简化码，降低CSS样式的复杂性
子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及color属性）

1.2.1 行高的继承性

body {
	font: 12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

1.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

<!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: pink !important;
        }

        .test {
            color: red;
        }

        #demo {
            color: skyblue;
        }
    </style>
</head>

<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>

</html>

在这里插入图片描述
因为在元素选择器样式后面加了“!important”，所以它的优先级最高，故字体显示粉红色
优先级注意点：

权重是由4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左到右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important无穷大。
继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是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>CSS权重注意点</title>
    <style>
        /* 父亲的权重是100 */
        #father {
            color: red;
        }

        /* p继承的权重为0 元素选择器权重 1 > 继承权重 0，故p标签文本显示粉红色*/
        p {
            color: pink;
        }

        /* a链接浏览器默认制定了一个样式 蓝色的 下划线 a {color: blue;} */
        /* body相当于a的父级标签，1>0 故a链接还是默认的蓝色有下划线的样式 */
        body {
            color: green;
        }

        /* 样式的层叠性，a链接的棕色层叠掉了默认的蓝色 */
        a {
            color: brown;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

</html>

在这里插入图片描述

1.3.1 权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li → 0，0，0，3 【三个都是标签选择器】
.nav ul li → 0，0，1，2 【第一个是类选择器，后面两个是标签选择器】
a:hover → 0，0，1，1【a为标签选择器，:hover是链接伪类选择器】
.nav a → 0，0，1，1【第一个是类选择器，第二个是标签选择器】

<!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>权重的叠加</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* 权重虽然有叠加,但是永远不会有进位 */
        /* ul标签选择器 li标签选择器 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2    2*/
        ul li {
            color: green;
        }

        /* li的权重是0,0,0,1    1*/
        li {
            color: red;
        }

        /* .nav类选择器 li标签选择器 0,0,1,0 + 0,0,0,1 = 0,0,1,1        11*/
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>

</html>

在这里插入图片描述

1.3.2 权重练习一

<!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>权重练习1</title>
    <style>
        .nav {
            color: red;
        }

        /* 继承的权重是0 */
        li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul clss="nav">
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wift</li>
    </ul>
</body>

</html>

在这里插入图片描述

1.3.2 权重练习二

<!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权重练习2</title>
    <style>
        /* .nav li 权重是11 */
        .nav li {
            color: red;
        }

        /* 需要把第一个小li 颜色改为 粉色加粗 */
        /*.pink 权重是10 .nav.pink 权重是20 */
        .nav .pink {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wift</li>
    </ul>
</body>

</html>