[分享]css内部样式和外部样式优先级

在 CSS 中，样式表可以分为内部样式和外部样式。那么它们的优先级是怎样的呢？首先，内部样式和外部样式都是用来定义 HTML 元素样式的。内部样式是直接写在 HTML 元素的 style 属性里的样式...

在 CSS 中，样式表可以分为内部样式和外部样式。那么它们的优先级是怎样的呢？

首先，内部样式和外部样式都是用来定义 HTML 元素样式的。内部样式是直接写在 HTML 元素的 style 属性里的样式。而外部样式则是通过 link 标签引入的外部文件中的样式。

<style>
    p {
        color: red;
    }
</style>

或

<link rel="stylesheet" type="text/css" href="style.css"> 

当 HTML 元素同时有内部样式和外部样式时，浏览器会根据优先级来决定采用哪一个样式。

对于内部样式，其优先级是最高的。如果 HTML 元素同时有内部样式和外部样式，并且二者定义了相同的属性，那么最终采用的是内部样式中定义的属性值。

如果 HTML 元素只有外部样式，那么是按照 CSS 文件中定义的样式来显示的。

对于外部样式，我们可以通过在同一文件或不同文件中定义多个样式表的方式来控制优先级。在 CSS 中，优先级是通过权重来决定的。

权重是指 CSS 规则中选择器的特殊性。通俗来说，就是选择器越具体，优先级就越高。

比如：

p { color: red; }         
/* 权重为 1, 元素选择器 */

#content p { color: green; }  
/* 权重为 101, ID 选择器加上元素选择器 */

p.special { color: blue; }  
/* 权重为 11, 类选择器加上元素选择器 */ 

根据规则，当一条样式规则的权重相同，但是存在冲突时，则采用最后定义的样式。

如果不同的选择器的权重不同，那么权重高的优先级就更高。因此，我们在编写 CSS 样式时，应该尽量避免权重相同的选择器之间产生冲突。

综上所述，虽然 CSS 内部样式和外部样式都是定义 HTML 元素样式的方式，但它们的优先级是不同的，需要注意规避权重相同的选择器之间的冲突。