【Html】三种CSS样式的优先级

有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况

1、使用

内联式

CSS设置“超酷的互联网”文字为

粉色

。

2、然后使用

嵌入式

CSS来设置文字为

红色

。

3、最后又使用

外部式

设置文字为

蓝色

（style.css文件中设置）。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了

粉色

。因为这三种样式是有优先级的，记住他们的优先级：

内联式 > 嵌入式
 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是

--就近原则（离被设置元素越近优先级别越高）

。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。