CSS优先级权重练习

最新推荐文章于 2023-07-14 21:40:16 发布

辐_射

最新推荐文章于 2023-07-14 21:40:16 发布

阅读量123

点赞数

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

本文链接：https://blog.csdn.net/L1585931143/article/details/127482505

版权

html+css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS权重练习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>CSS权重练习1</title>
    <style>
        .nav {
            color: red;
        }
        /* li权重继承为 0,0,0,0 */
        /* li权重 0,0,0,1 */
        li {
            color: blue;
        }
    </style>
</head>

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

</html>

CSS权重练习(叠加)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权重 0,0,1,0  0,0,0,1           0,0,1,1*/
        .nav li{
            color: red;
        }
        /* 需求把第一个小li颜色改为 粉色加粗 */
        /* .pink权得 0,0,1,0 */
        /* .nav .pink权重 0,0,1,0 0,0,1,0      0,0,2,0 */
        .nav .pink {
            color: pink;
            font-weight: 700;
        }

    </style>
</head>

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

</html>