0426-CSS三大特性之优先级

最新推荐文章于 2022-06-30 20:34:53 发布

原创最新推荐文章于 2022-06-30 20:34:53 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了CSS中的优先级概念，解释了当多个选择器应用于同一元素时如何决定样式应用的先后顺序。文章通过实例展示了不同情况下优先级的判断方法，并提供了一个具体的HTML样例帮助理解。

1.什么是优先级?
作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

2.优先级判断的三种方式
2.1间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
2.2相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
2.3不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-CSS三大特性之优先级</title>
    <style>
        /*
        li{
            color: blue;
        }
        ul{
            color: red;
        }
        */
        /*
        p{
            color: blue;
        }
        p{
            color: red;
        }
        */
        #identity{
            color: purple;
        }
        .para{
            color: pink;
        }
        p{
            color: green;
        }
        *{
            color: blue;
        }
        li{
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
</body>
</html>