三.CSS层叠

最新推荐文章于 2024-10-01 23:20:42 发布

丑阳璐

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量129

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_52735772/article/details/114468726

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的层叠规则，包括样式声明的重要性、特殊性和源次序，以及如何解决声明冲突。同时，讨论了CSS的继承机制，解释了如何通过重置样式和爱恨法则来控制元素的显示效果。此外，还探讨了属性计算过程，包括确定声明值、层叠冲突、使用继承和使用默认值的情况。最后，提到了两个特殊的CSS取值`inherit`和`initial`的用法。

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

层叠

声明冲突：同一个样式，多次应用到同一个元素。

层叠(权重计算)：解决声明冲突的过程，浏览器自动处理。

1. 比较重要性

重要性从高到低：

作者样式表中的important

background-color: deeppink !important;

作者样式表中的普通样式
浏览器默认样式表

2.比较特殊性

总体规则：选择器选中的范围越窄越特殊。
具体规则：通过选择器来进行计算。

<a href="" style="color: #008c8c;">知识</a>

3.比较源次序

书写靠后的特殊性越高。

应用

重置样式表

书写作者样式来覆盖浏览器的默认样式。

常见的重置样式表：normalize.css reset.css meyer.css。

爱恨法则

link > visited > hover > active

    <style>
        /*没有访问过的颜色*/
        a:link{
            color: black;
        }
        /*访问过后的颜色*/
        a:visited{
            color: brown;
        }
        /*鼠标移入的颜色*/
        a:hover{
            color: blue;
        }
        /*鼠标按下去时的颜色*/
        a:active{
            color: cornflowerblue;
        }
    </style>

继承

子元素会继承父元素的某些css属性。

跟文字相关的属性会被继承。

属性值的计算

元素依次渲染，按照页面文档的树形目录结构进行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtchKG8x-1615055877476)(图片路径)]

渲染每个元素的前提条件：该元素的所有css属性必须有值。

一个元素从所有属性都没有值，到所有属性都有值，这个计算过程

叫做属性计算过程。

计算过程：
1. 确定声明值
2. 层叠冲突
3. 使用继承
4. 使用默认值

CSS中两个特殊的取值：

inherit：手动(强制)继承，将父元素取出应用到该元素。

    <style>
        div{
            color: brown;
        }
        a{
          text-decoration:none;
          color: inherit;
        }
    </style>
</head>
<body>
    <div>
        <a href="baidu.com">
            百度
        </a>
    </div>
</body>

initial：将该属性设置为默认值。

<style>
    div{
        width: 200px;
        height: 200px;
        background: turquoise;
    }
    /*背景颜色的默认值(透明色)*/
    .d1{
        background: transparent;
    }
    /*直接使用默认属性*/
    .d1{
        background: initial;
    }
</style>
<body>
    <div class="d1">
    </div>
</body>
rent;
    }
    /*直接使用默认属性*/
    .d1{
        background: initial;
    }
</style>
<body>
    <div class="d1">
    </div>
</body>