视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS基础学习十一:选择器的优先级_html/css
2020-11-27 16:14:38 责编:小采
文档


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

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

方法就是尝试!!!

一简单选择器的优先级

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

我们来试验:

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


注释掉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

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

我们还是来尝试:

CSS选择器优先级攻城课堂
首先运行的结果我们肯定知道是红色,那么我们在标签选择器后面!important,我们再来运行结果看看?
/*元素选择器渲染的是红色*/div{color:#0000FF!important;}
运行的结果为:


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







版权声明:本文为博主原创文章,未经博主允许不得转载。

下载本文
显示全文
专题