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

最后更新于:2022-04-01 11:29:32

在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选择器的优先级最高。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_57215597290bc.jpg) 注释掉id选择器后的结果为:类选择器的优先级居其次。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155973d1d9.jpg) 因此这三个简单选择器的优先级顺序为: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> ~~~ 运行的结果为: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155974c98a.jpg) 我们尝试的结果为: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> ~~~ 运行的结果为: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155975feea.jpg) 最终我们得出的结论依然是:同类型的选择器,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> ~~~ 运行的结果为与我们的理论是一致的! ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155977158a.jpg) 那么我们可能会有一个疑问:同样的权重,那个选择器起作用呢?从一系列的理论和试验我们可以得出这与同类 型选择器的优先级问题相似,我们还是能轻易的得出结论:同样的权重要选择顺序最后的生效。 ### 四,!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; } ~~~ 运行的结果为: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155978324a.jpg) 关于选择器的优先级我也就了解了这些,CSS选择器就告一段落了!!      
';