CSS基础学习十一：选择器的优先级

最新推荐文章于 2024-07-07 11:28:13 发布

life is wonderful

最新推荐文章于 2024-07-07 11:28:13 发布

阅读量4.8k

点赞数 2

分类专栏： CSS Web前端HTML+CSS+JS初级入门文章标签： web前端开发 css 选择器优先级

本文链接：https://blog.csdn.net/erlian1992/article/details/49848467

版权

Web前端HTML+CSS+JS初级入门同时被 2 个专栏收录

60 篇文章 75 订阅

订阅专栏

CSS

18 篇文章 1 订阅

订阅专栏

在CSS基础学习的篇章中，从第四篇博客开始说选择器，到昨天基本已经说完了。今天我们总结一下，选择器作

用：告知浏览器需要设置哪个dom元素的样式。最后来说说选择器一个重要的问题，选择器的优先级。判断优先级的

方法就是尝试！！！

一简单选择器的优先级

简单的选择器包括我们在第四篇，第五篇，第六篇博客的元素选择器(标签选择器)，类选择器和id选择器。

我们来试验：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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>

运行的结果为：

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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;

}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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

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

我们还是来尝试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器优先级</title>
<style type="text/css">
/*元素选择器渲染的是蓝色*/
div{
color:#0000FF;
}
/*类选择器渲染的是红色*/
.test{
color:#FF0000;
}
</style>
</head>


<body>
<div class="test">攻城课堂</div>
</body>
</html>

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

/*元素选择器渲染的是红色*/
div{
color:#0000FF!important;
}

运行的结果为：

关于选择器的优先级我也就了解了这些，CSS选择器就告一段落了！！

life is wonderful

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录