CSS中样式的优先级

以改变段落文字颜色为例来介绍CSS中所使用的三种样式及其优先级

初始代码

初始效果

• 内联样式：通过style属性应用于文档中的特定标记。

  

  
  此时，只有段落1变成了红色

• 内部样式：将所有的样式定义放在一起作为元素一部分，放在文档头部。

  

  

此时两个段落的颜色都变成了红色。

• 外部样式：通过引入的.css文档改变表现的效果。

  

  这是.css文件内容

  
  应用外部样式后，两个段落都变成了红色。
  外部样式将网页的内容与其表现形式分开了。

• 优先级：内联样式>内部样式>外部样式
  同时使用内联样式（将段落字体设置为黑色）、内部样式（将段落字体设置为灰色）、外部样式（将段落字体设置为红色）后

  

  外部样式.css文件内容

  

内部样式定义内容将外部样式定义的内容覆盖

当使用！important时，使用！important的样式的优先级最高。