CSS样式的优先级对比验证-白红宇

CSS样式的优先级对比验证

阅读量：5945 次

发布时间：2019-06-19

本文共 2099 字，大约阅读时间需要 6 分钟。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置

外部样式表

内部样式表（位于 <head> 标签内部）

内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

但是也有一种例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

以下做CSS优先级对比验证

一、外部样式表 VS 内部样式表

（先定义内部样式表，再引入外部样式表定义文件）

    CSS样式表优先级测试    
    
    
         div {color: green}
         
     
      外部样式表(蓝色) VS 内部样式表(绿色)

（先引入外部样式表定义文件，再定义内部样式表）

CSS样式表优先级测试
    
    
    
     div {color: green;}
     
      外部样式表(蓝色) VS 内部样式表(绿色)

得出优先级比较结果，在直接对标签的样式进行定义时，外部样式表和内部样式表的优先与他们的引入顺序有关。

后面的样式将会覆盖前面的样式设置。

二、外部样式表 VS 内联样式（直接在div标签中通过style来定义样式）

CSS样式表优先级测试
    
    
    
     外部样式表(蓝色) VS 内联样式(红色)

得出优先级结果：内联样式 > 外部样式表

三、内联样式 VS 内部样式表

CSS样式表优先级测试
    
    
     div {color: green}
     
      内部样式表(绿色) VS 内联样式(红色)

优先级结果：内联样式 > 内部样式表

从上面步骤的对比中我们可以知道:内部样式的优先级是最大的，而内部样式表和外部样式表的优先级得看他们的引入和定义顺序，如果先用内部样式表定义了样式，然后再引入通过外部样式表定义的样式，外部样式表的样式将会覆盖内部样式表定义的样式，反之亦是一样。

四、id、class以及标签选择器三种方式并存的时候

优先级的比较结果： id选择器 > class选择器 > 标签选择器

CSS样式表优先级测试
    
    
     fieldset {width: 50%}div {color: red;}#idtest {color: green;}.classtest {color: blue;}
     
      单一显示效果
      
       只使用ID(绿色)
       
        只使用Class(蓝色)
       
      
     
      
     
      先引入ID定义的样式再引入Class定义的样式
      
       小学徒
      
     
      
     
      先引入Class定义的样式再引入ID定义的样式
      
       小学徒

五、当且仅当有两个或者是多个class或者id的时候，谁在前面就谁的优先级高。


    
     两个class的时候
     
      classtest2(黄色)先classtest(蓝色)后
      
       classtest(蓝色)先classtest2(黄色)后
      
     
    
 
    
     两个id的时候
     
      idtest(绿色)先idtest2(黄绿色)后
      
       idtest2(黄绿色)先idtest(绿色)后

当只有标签选择器的时候，后面定义的样式表的优先级就越高。


    
     div {color: red;}div {color: blue;}

总结

1.当只使用id选择器、class选择器或者标签选择器的时候，不管是使用多少种样式表定义方式，都是内嵌样式的优先级最高，

2.外部样式表和内部样式表的优先级顺序则就得看他们的引入顺序了;

3.当只使用id选择器或者class选择器的时候，同一个标签内不管使用了多少个，都是排在前面的优先级更高;

4.当只使用标签选择器的时候，如果定义了多个一样的，你们写在最后面的标签选择器生效，也就是它的优先级最高;

5.当同一个标签中既有id选择器，又有class选择器，同时又有标签选择器的时候，优先级的次序是: id选择器 > class选择器 > 标签选择器;

6.当每一种都有的时候，那就根据具体情况具体分析吧，嘿嘿，哈哈……

转载于:https://my.oschina.net/ajian2014/blog/299694

你可能感兴趣的文章

一、外部样式表 VS 内部样式表

二、外部样式表 VS 内联样式 （直接在div标签中通过style来定义样式）

三、内联样式 VS 内部样式表

四、id、class以及标签选择器三种方式并存的时候

五、当且仅当有两个或者是多个class或者id的时候，谁在前面就谁的优先级高。

二、外部样式表 VS 内联样式（直接在div标签中通过style来定义样式）