HTML CSS——层叠

最新推荐文章于 2024-03-12 20:10:01 发布

33的史努比

最新推荐文章于 2024-03-12 20:10:01 发布

阅读量507

点赞数

分类专栏：前端入门学习文章标签： css html 前端

本文链接：https://blog.csdn.net/coising/article/details/122462910

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

层叠

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

层叠：解决声明冲突的过程，浏览器自动处理（仅重计算）

1. 比较重要性

重要性从高到低：

作者样式表：开发者书写的样式

1 作者样式表中的！important样式

    a{
            color: brown !important;
        }

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

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出4位数xxxx
依次比较，不是逢十进一：

千位：如果是内联样式，记1，否则为0
百位：等于选择器中所有ID选择器数量
十位：选择器中所有类(class)选择器，属性选择器，伪类选择器(:xx)数量之和
个位：选择器中所有元素选择器，伪元素选择器数量之和

举例：

<!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>Document</title>
    <style>
        a{
            /* 0001*/
            color: red;
        }
        div ul a{
            /* 0003 */
            color: green;
        }
        #mydiv #myul a{
            /* 0201 2个ID 1个元素选择器 */
            color: grey;
        }
        #mydiv #myul .mylink{
            /* 0210 */
            color:#008c8c;
        }
        #mydiv #myul a:link{
            /* 0211 :link是伪类选择器 a元素选择器 */
            color: chocolate;

        }
    </style>
</head>
<body>
    <div id="mydiv">
        <ul id="myul">
            <li id="mylink">
                <a href="https://163.com" class="mylink">
                    举个例子
                </a>

            </li>
        </ul>

    </div>
</body>
</html>

3. 比较源次序

代码书写靠后的胜出
eg上述代码a:link 改成 :link 则chocolate颜色

应用

重写样式表书写一些作者样式，覆盖浏览器默认样式
重置样式表
常见重置样式表： normalize.css reset.css meyer.css
爱恨法则
link > visited > hover > active

<!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>Document</title>
    <style>
        a:link{
            color: green;

        }
        a:visited{
            color: red;
        }
        a:hover{
            color: chocolate;
        }
        a:active{
            color: black;
        }

    </style>
</head>
<body>
    <a href="http://163.com">wangyi</a>
</body>
</html>