42 CSS的三大特性_css中第一个li字体加粗-CSDN博客

本文链接：https://blog.csdn.net/hello_sunny123/article/details/118659742

本文深入探讨了CSS的三大核心特性：层叠性，继承性和选择器优先级。通过实例代码展示，解释了如何理解层叠性决定样式生效的顺序，如何利用继承性减少重复代码，以及如何计算和应用选择器优先级确保特定样式生效。同时，文章提供了练习题帮助读者巩固所学。

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

一.层叠性

在这里插入图片描述

代码：

<!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>01-CSS 层叠样式</title>
    <style>
        div {
            color: red;
            font-size: 20px;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪，前浪死在沙滩上</div>
</body>

</html>

结果

在这里插入图片描述

二.继承性

在这里插入图片描述

代码：

<!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>02-CSS 继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>

</html>

结果：

在这里插入图片描述

三.行高的继承性

在这里插入图片描述

代码：

<!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>
        body {
            color: pink;
            /* font: 12px/24px "microsoft YaHei" */
            font: 12px/1.5 "Microsoft YaHei"
        }

        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5就是当前元素文字的大小font-size 的1.5倍 所以当前元素的行高是：14*1.5=21 */
            font-size: 14px;
        }

        p {
            /* 1.5*16=24  当前的行高 */
            font-size: 16px;
        }

        /* li没有手动自定文字大小，则会继承父亲的文字大小，body 12px 所以li的文字大小为12px */
        /* 当前li的行高 12*1.5=18 */
    </style>
</head>

<body>
    <div>粉红的回议</div>
    <p>粉红的回议</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

</html>

运行结果：

在这里插入图片描述

四.选择器优先级

在这里插入图片描述

代码

<!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>
        /* 类选择器权重 0，0，1，0 */
        .test {
            color: red;
        }

        /* 元素选择器0,0,0,1 */
        /* !important权重是无穷大 */
        div {
            color: pink !important;
        }

        /* ID 选择器权重0,1,0,0 */
        #demo {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 行内样式表style="" 权重是1,0,0,0 -->
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>

</html>

运行结果

在这里插入图片描述

注意：

在这里插入图片描述

代码

<!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>
        /* 继承的权重为0 */
        /* 父亲的权重是0,1,0,0 */
        #father {
            color: red !important;
        }

        /* p继承的权重是0 */
        /* p本身的权重是0,0,0,1 */
        /* 所以以后看标签到底执行那个样式,就看这个标签有没有直接被选出来,被选出来就执行自己的样式,继承永远不重要 */
        p {
            color: pink;
        }

        body {
            color: red;
        }

        /* a链接浏览器默认指定了一个样式,蓝色带下划线 a{color: blue} */
        /* 要改变a的样式,就要单独给a指定 */
        a {
            color: green;
        }
    </style>
</head>

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

</html>

结果

在这里插入图片描述

五.权重叠加

在这里插入图片描述

代码

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

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

        /* .nav li 的权重 0,0,1,0 + 0,0,0,1=,0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>

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

</html>

结果

在这里插入图片描述

练习

练习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>
        .nav {
            color: red;
        }

        /* 继承的权重为0,父亲权重10,但是继承过来为0 */
        li {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- ul.nav>li{人生四大悲} -->
    <ul class="nav">
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>

</html>

结果

在这里插入图片描述

练习2

需求把第一个`li`,颜色改为粉色加粗

代码

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

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

<body>
    <!-- ul.nav>li{人生四大悲} -->
    <ul class="nav">
        <li class="gaise">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>

</html>