css优先级机制说明_html/css_WEB-ITnose

首先说明下样式的优先级,样式有三种：

1. 外部样式（External style sheet）

示例：

2.内部样式（Internal style sheet）

示例:

3.内联样式（Inline style）

示例：

样式测试

虽然内联样式可以比较灵活的单独改变某一标签的样式，但还是建议尽量不要使用内联样式。因为这样做虽然更为直观，但不符合结构与表现分离的设计思想。

一般来说，以上三种样式的优先级如下：

内联样式>内部样式>外部样式

选择器的优先级：

选择器的种类可以分为三种，分别是：

1.标签名选择器 如 h1{}。

2.类选择器 如 .test{}。

3.ID选择器 如 #test{}。

同时还需要考虑到内联样式表，即在标签内写入style=""的方式。

在此我们用数字1000，100,10,1来表示上述三种选择器和内联样式表的权值，数字越大则权值越大，也就是优先级越高。

各个选择器的权值如下：

1. 内联样式表的权值最高，设为1000；

2. ID 选择器的权值其次，设为 100

3. Class 类选择器的权值第三，设为 10

4. HTML 标签选择器的权值最低，设为 1

示例：

  
 
优先级测试 优先级测试 
 
优先级测试
 
  

在火狐，IE10，Chrome浏览器页面显示结果如下：

标签内的内容显示为红色

标签内的内容显示为黄色

最后一个

标签内的内容显示为蓝色

另外在同一组属性设置中标有“!important”规则的优先级最大，示例如下：

 
!important测试