时间:2021-07-01 10:21:17 帮助过:32人阅读
用:告知浏览器需要设置哪个dom元素的样式。最后来说说选择器一个重要的问题,选择器的优先级。判断优先级的
方法就是尝试!!!
一简单选择器的优先级
简单的选择器包括我们在第四篇,第五篇,第六篇博客的元素选择器(标签选择器),类选择器和id选择器。
我们来试验:
运行的结果为:id选择器的优先级最高。CSS选择器优先级
注释掉id选择器后的结果为:类选择器的优先级居其次。
因此这三个简单选择器的优先级顺序为:HTML标签属性>id选择器>类选择器>元素选择器
二同类型选择器的优先级
同类型:指的是相同类型的选择器,理论上优先级是一样的。比如:div和p。.btn和.button。#header和
#footer,它们的优先级是相同的。但是当同类型的选择器作用到相同的HTML标签上的时候优先级就不一样了。
我们继续试验:
运行的结果为:CSS选择器优先级
我们尝试的结果为:CSS规则写在最后面的生效!!
如果这还不能信服我们再来尝试
有什么不一样的效果?运行的结果为:CSS选择器优先级
最终我们得出的结论依然是:同类型的选择器,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;
}
从我们约定的规则来看,显然是第二个生效!
运行的结果为与我们的理论是一致的!CSS选择器优先级 12345
那么我们可能会有一个疑问:同样的权重,那个选择器起作用呢?从一系列的理论和试验我们可以得出这与同类
型选择器的优先级问题相似,我们还是能轻易的得出结论:同样的权重要选择顺序最后的生效。
四!important
样式最高优先级:无视优先级,在样式的一条声明的最后分号前加上,使该样式起作用。
我们还是来尝试:
首先运行的结果我们肯定知道是红色,那么我们在标签选择器后面!important,我们再来运行结果看看?CSS选择器优先级 攻城课堂
/*元素选择器渲染的是红色*/div{color:#0000FF!important;}运行的结果为:
关于选择器的优先级我也就了解了这些,CSS选择器就告一段落了!!
版权声明:本文为博主原创文章,未经博主允许不得转载。