css样式的优先级

最新推荐文章于 2022-04-08 15:49:39 发布

dream_hai

最新推荐文章于 2022-04-08 15:49:39 发布

阅读量642

点赞数 2

分类专栏： web前端 css

本文链接：https://blog.csdn.net/dream_hai/article/details/64443635

版权

web前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

  1.内联样式 > 内部样式表 > 外部样式表（写在head标签中） 

  外部样式表使用link引入只能写在head标签中。故内部样式表相当于在外部样式表的后面。所以内部样式表离元素近优先级高，如果将外部样式表的link标签写在style标签后面，。外部样式表会优先生效（不过这样不怎么符合规则）。 

  w3c中： 

 
  一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 
 
 浏览器缺省设置
 外部样式表
 内部样式表（位于 <head> 标签内部）
 内联样式（在 HTML 元素内部）
 
  因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。 
 
 
  
 
 

    2.选择器相同的时候看先后顺序，后定义的优先级高。 
  
 
   <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>样式表</title>
    <link rel="stylesheet" href="newe.css">
 </head>
<style>
.la{
	color:red;
}
.main{
	color:blue;
}
</style>
<body>
<div class="main la" id="con" >
   CSS样式表的优先级问题
</div>
</body>
</html>字体颜色为蓝色。 
   
 3.定义多个class或ID 
  

    <div class="main" class="la" ></div> 
   
 
  

    这样定义是错误的。浏览器只会识别第一个class，忽略第二个，浏览器显示的源码： 
   <div class="main"></div>
     正确定义为 
    <div class="main la">< 
    /div>。 
   

     <div id="main" id=“la”> 
    </div>或者<div id="main la”> 
    </div>均是错误的因为语法规定一个控件只能有一个ID。 
   
 
   
 
  