CSS 的继承性和优先级

最新推荐文章于 2024-02-16 13:16:36 发布

Cassie燁

最新推荐文章于 2024-02-16 13:16:36 发布

阅读量530

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126229158

版权

CSS继承：子标签会继承父标签的某些样式，如文本颜色和色号

text- font- line- 这些元素开头的可以继承，以及color属性

行高的继承

    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft yahei'; */
            font: 12px/1.5 'Microsoft yahei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 */
            /* 这个1.5就是当前元素文字大小 font-size 的 1.5 倍， 所以div的行高就是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  继承父亲的父亲body */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高 1.5

此时子元素的行高是：当前子元素的文字大小*1.5

body 行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

CSS 三大特性之优先级

继承或者 * 0，0，0，0

元素选择器 0，0，0，1

类选择器，伪类选择器 0，0，1，0

ID选择器 0，1，0，0

行内样式 style="" 1，0，0，0

！important 重要的无穷大

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

div ul li 0,0,0,3

.nav ul li 0,0,1,2

a:hover 0,0,1,1

.nav a 0,0,1,1

    <style>
        .nav {
            color: red;
        }
        继承的权重是0
        li {
            color: pink;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没WiFi</li>
    </ul>
</body>

    <style>
        /* .nav li 权重是11 */
        .nav li {
            color: red;
        }
        /* 需求： 把第一个小li改成 粉色加粗 */
        /* 权重是 10 */
        /* .pink {
            color: pink;
            font-weight: 700;
        } */

        /* .nav 和 .pink 权重都是10 加起来总权重是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>学校没WiFi</li>
    </ul>
</body>