css选择器优先级

来源：互联网发布：一键换机软件下载编辑：程序博客网时间：2024/06/08 09:11

!important > 行内样式>ID选择器 > 类选择器 > 属性选择器（或伪类选择器）>标签（子选择器，后代选择器，兄弟选择器）> 通配符 > 继承 > 浏览器默认属性

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>CSS选择器优先级</title>
<style type="text/css">
/*标签选择器的渲染红色*/
div{
background-color:#FF0000;
width:900px;
height:400px;
}
/*类选择器的渲染蓝色*/
.test{
background-color:#0000FF;
width:900px;
height:300px;
}
/*id选择器的渲染紫色*/
#test{
background-color:#FF00FF;
width:900px;
height:200px;
}
</style>
</head>
<body>
<div id="test" class="test"></div>
</body>
</html>

运行的结果为：id选择器的优先级最高。

注释掉id选择器后的结果为：类选择器的优先级居其次。

因此这三个简单选择器的优先级顺序为：HTML标签属性>id选择器>类选择器>元素选择器

同类型选择器的优先级

同类型：指的是相同类型的选择器，理论上优先级是一样的。比如：div和p。.btn和.button。#header和

#footer，它们的优先级是相同的。但是当同类型的选择器作用到相同的HTML标签上的时候优先级就不一样了。

我们继续试验：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="" />  
<title>CSS选择器优先级</title>  
<style type="text/css">  
/*test类选择器的渲染浅绿色*/  
.test{   
background-color:#00FF00;  
width:900px;  
height:200px;  
 }  
 /*test1类选择器的渲染浅蓝色*/  
.test1{   
background-color:#00FFFF;  
width:900px;  
height:200px;  
 }  
</style>  
</head>  
  
<body>  
<div class="test test1"></div>  
</body>  
</html></span>  

运行的结果为：

我们尝试的结果为：CSS规则写在最后面的生效！！

如果这还不能信服我们再来尝试<div class="test1 test"></div>有什么不一样的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS选择器优先级</title>
<style type="text/css">
/*test类选择器的渲染浅绿色*/
.test{
background-color:#00FF00;
width:900px;
height:200px;
}
/*test1类选择器的渲染浅蓝色*/
.test1{
background-color:#00FFFF;
width:900px;
height:200px;
}
</style>
</head>
<body>
<div class="test test1"></div>
<hr/>
<div class="test1 test"></div>
</body>
</html>

运行的结果为：

最终我们得出的结论依然是：同类型的选择器，CSS规则写在最后面的生效！

三选择器的优先级

CSS选择器组合出很多复杂的选择器规则，那么我们就不能像简单的选择器那样一个一个尝试。下面我们介绍一

个很实用的判断优先级的方法。

判断优先级：我们约定 id选择器的权重为100，类选择器权重为10，标签选择器权重为1。一个复杂的选择器的权

重等于所有选择器的权重之和。一般，选择器越特殊，优先级(权重)越高。

我们先来看两个复杂的选择器规则：

第一个选择器的权重为：1+10+10+1=22

div.test .item span{

background-color:#00FF00;

}

第二个选择器的权重为：100+1+1=102

#test div span{

background-color:#FF0000;

}

从我们约定的规则来看，显然是第二个生效！

[html] view plain copy
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>CSS选择器优先级</title>  
<style type="text/css">  
/*第一个选择器渲染的是绿色*/  
div.test .item span{  
background-color:#00FF00;  
}  
/*第一个选择器渲染的是红色*/  
#test div span{  
background-color:#FF0000;  
}   
</style>  
</head>  
  
  
<body>  
<div id="test" class="test">  
         <div class="item">  
                <span>12345</span>  
         </div>  
</div>  
</body>  
</html> 

运行的结果为与我们的理论是一致的！

那么我们可能会有一个疑问：同样的权重，那个选择器起作用呢？从一系列的理论和试验我们可以得出这与同类

型选择器的优先级问题相似，我们还是能轻易的得出结论：同样的权重要选择顺序最后的生效。

四!important

样式最高优先级：无视优先级，在样式的一条声明的最后分号前加上，使该样式起作用。

我们还是来尝试：

[html] view plain copy
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>CSS选择器优先级</title>  
<style type="text/css">  
/*元素选择器渲染的是蓝色*/  
div{  
color:#0000FF;  
}  
/*类选择器渲染的是红色*/  
.test{  
color:#FF0000;  
}  
</style>  
</head>  
  
  
<body>  
<div class="test">攻城课堂</div>  
</body>  
</html> 

首先运行的结果我们肯定知道是红色，那么我们在标签选择器后面!important，我们再来运行结果看看？

[css] view plain copy
 
div{  
color:#0000FF!important;  
}    

运行的结果为：

目前为止优先级已经是：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 浏览器默认属性

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>CSS选择器优先级</title>  <style type="text/css">  *{color:red};

#test{color:blue}</style>  </head>    <body><div id="test" class="test">           <div class="item">         <span title='haha'>12345</span>            <em></em>                 </div>  </div></body>  </html>

结果为：
为红色

所以：通配符>继承的属性

目前为止优先级已经是：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 >继承的属性 > 浏览器默认属性

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>CSS选择器优先级</title>  <style type="text/css">    span[title='haha']{color:green} span{color:blue}</style>  </head>    <body><div id="test" class="test">           <div class="item">         <span title='haha'>12345</span>            <em></em>                          </div>  </div></body>  </html>

结果为：

为绿色

所以：属性选择器>标签选择器

目前为止优先级已经是：!important > 行内样式>ID选择器 > 类选择器 > 属性选择器 > 标签 > 通配符 >继承的属性 > 浏览器默认属性

属性选择器与伪类选择器要用权重来衡量，而标签选择器与后代选择器，子选择器，兄弟选择器也要用权重来衡量

所以：!important > 行内样式>ID选择器 > 类选择器 > 属性选择器（或伪类选择器）> 标签（子选择器，后代选择器，兄弟选择器）> 通配符 > 继承 > 浏览器默认属性

阅读全文

0 0