css三大特性（继承性，层叠性，优先级） day05

mc.byte

已于 2022-07-22 21:41:17 修改

阅读量149

点赞数

分类专栏： web前端 # 笔记文章标签： css 前端 html

于 2022-07-22 21:14:41 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/125931739

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

1.继承性：子承父业 - 子元素有默认父元素样式的效果图

1.1 常见可以继承样式：1.color 2.font-相关属性 3. line-height:行高

可以继承的常见属性(文字控制属性都可以继承) ：1. color 2. font-style、font-weight、font-size、font-family 3. text-indent、text-align 4. line-height 5. ……

➢ 注意点： • 可以通过调试工具判断样式是否可以继承

1.2 继承的小样式： 1）去除列表默认的样式（小圆点）： ul {list-style:none}

继承常见应用：1.可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

<style>
        /* li {
            list-style: none;
        } */
        ul {
            list-style: none;
        }
</style>
<ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
</ul>

1.4 继承失效的特殊情况

1. a标签的color会继承失效 • 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了 2. h系列标签的font-size会继承失效 • 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

(调试会发现h标签font-size:1.17em 就是当前文字的1.17个大小，所以会随当前文字大小变化)

3.div的宽度有继承的效果

2.层叠性

特性：

1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

➢ 注意点： 1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

<style>
        /* 层叠性：给同一个元素设置相同样式，后面的代码会层叠掉之前的代码 */
        div {
            color: red;
        }
        div {
            color: blue;
        }

        /* 给同一个元素设置不同样式，不同样式层叠作用在该元素 */
        div {
            color: red;
        }
        div {
            font-size: 50px;
        }
</style>
<body>
    <div>文字</div>
</body>

3.优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

3.1 优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意：!important不要用在继承，如果用在继承并不能提高优先级

3.2 权重叠加计算：（0，0，0，0）

1.行内样式的个数

1.id选择器的个数

1.类选择器的个数

1.标签选择器的个数

代码时例：

<style>
        /* 0 , 0 , 1 , 1 */
        .father p {
            color: red;
        }

        /* 0 , 0 , 0 , 2 */
        div p {
            color: blue;
        }

        /* 0 , 0 , 1 , 1 */
        div .son {
            color: green;
        }

        /* 0, 1 ,1 ,0 */
        .father #two {
            color: orange;
        }

        /* 0 ,0 ,0 ,1 */
        div {
            /* !important不能提升继承的优先级(权重) */
            color: pink !important;
        }
</style>
<html>
<body>
    <div class="father" id="one">
        <p class="son" id="two">文字</p>
    </div>
</body>
</html>