[分享]css中定位的优先级

CSS 中定位的优先级是非常重要的，它能够决定哪些样式能够被应用到页面元素中。在 CSS 中，有三种不同的定位方式，分别是 行内样式，内部样式表和外部样式表。当有多个样式规则被应用到同一个元素时，CS...

CSS 中定位的优先级是非常重要的，它能够决定哪些样式能够被应用到页面元素中。

在 CSS 中，有三种不同的定位方式，分别是 行内样式，内部样式表和外部样式表。

当有多个样式规则被应用到同一个元素时，CSS 会根据 优先级 的规则来决定哪个规则最终生效。

<style>
    p {
        color: red;
    }

    #title {
        color: blue;
    }

    .content p {
        color: green;
    }

    p {
        color: yellow;
    }
</style>

<div id="title">这是标题</div>
<div class="content">
    <p>这是段落 1</p>
    <p>这是段落 2</p>
</div> 

在上面的示例代码中，我们定义了四个不同的样式规则。首先是我们为所有的 p 元素指定的默认样式（color: red;），接下来是一个 ID 选择器 #title（color: blue;），然后是一个类选择器 .content p（color: green;），最后是再次为所有的 p 元素指定的样式（color: yellow;）。

如果我们把上面的代码运行起来，你会发现页面上的段落 1 是绿色的（因为它是 .content 内部的 p 元素），段落 2 和标题都是蓝色的（因为它们都有一个更具体的选择器）。但是，如果我们把第四个规则的 color 改为 purple，那么所有的段落都会变为紫色，因为最后一个规则的优先级最高。

在 CSS 中， 行内样式 拥有最高的优先级，其次是 内部样式表，最后是 外部样式表。如果有多个具有相同优先级的样式规则，那么根据 CSS 的 就近原则 来决定哪个样式规则最终生效。