层叠和继承

深林最里人已无

已于 2023-07-20 12:06:17 修改

阅读量57

点赞数

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

于 2023-07-17 23:33:10 首次发布

本文链接：https://blog.csdn.net/weixin_56490825/article/details/131777399

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.层叠
        当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。 */
        h2{
         color:red;
        }
        h2{
         color: green;
        }
        /* 浏览器是根据优先级来决定 当相同的元素的时候设置同样属性 需要使用那个 */
        /* color 属性是一个继承属性 */

        /* 像 width（上面提到的）、margin、padding 和 border 不会被继承。如果 border 可以被继承，每个列表和列表项都会获得一个边框——可能就不是我们想要的结果！
        但我们通常可以通过常识来判断哪些属性属于默认继承。 */
        .main {
            color: rebeccapurple;
            border: 2px solid #ccc;
            padding: 1em;
        }

        .special {
            color: rgb(10, 216, 76);
            font-weight: bold;
        }
        /* CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。
        inherit 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
        initial 将应用于选定元素的属性值设置为该属性的初始值。
        revert (en-US) 将应用于选定元素的属性值 重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
        revert-layer (en-US) 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
        unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

         */
         .box {
            color: rgb(40, 235, 14);
        } 
        .my-class-2{
            color: rgb(238, 68, 7);
        }   
        .my-class-1 a {
            color: inherit;/* 父元素相同 */
        }   
        .my-class-2 a {
            color:initial;
        }  
        .my-class-3 a {
            color: unset; /* 自然继承那么就是 inherit */
            
        }
    </style>
</head>
<body>
    <h2>This is my heading.</h2>

    <ul class="main">
        <li>Item One</li>
        <li>Item Two
            <ul >
                <li class="special">2.1
                    <ul>
                        <li>2.1.1</li>
                        <li>2.1.2</li>
                    </ul>
                </li>
                <li>2.2</li>
            </ul>
        </li>
    </ul>

    <ul class="box">
        <li>Default <a href="#">link</a> color</li>
        <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
        <li class="my-class-2">Reset the <a href="#">link</a> color</li>
        <li class="my-class-3">Unset the <a href="#">link</a> color</li>
    </ul>
</body>
</html>

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承

优先级注意点：

1. 权重是有4组数字组成,但是不会有进位。
2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
    - div ul li ------> 0,0,0,3
    - .nav ul li ------> 0,0,1,2
    - a:hover -----—> 0,0,1,1
    - #nav a ------> 0,1,0,1

如果权重一样，那么以后出现的为准：

层叠与继承 - 学习 Web 开发 | MDN