CSS选择器优先级

HTML5学堂:CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级:id > class > tagname。具体我们来看看本文给大家讲解的CSS选择器优先级。

什么是CSS选择器优先级

在我们使用CSS进行样式设置时,首先需要选择到相应标签,此时我们会使用到CSS选择器进行标签的选择。当多种选择器均选择到了一个标签时,且均进行了样式的设置,那么到底哪种样式生效呢?此时就会涉及到我们的CSS选择器的优先级问题。

demo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
.con {
width: 100px;
height: 100px;
background: #ccf;
text-align: center;
}
.wrap div {
background: #fcc;
font-size: 44px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="con">HTML5学堂 - 专注于HTML5技术教育</div>
</div>
</body>
</html>

在上面的实例中,类名为con的div样式为:宽度100像素,高度100像素,浅红色的背景颜色,字体大小44像素,行高为100像素,且在父级元素中水平居中对齐。

那么,此时,是否对优先级有所了解了呢?

再举一个生活的例子吧,假设你还在上高中,这时候你的班长站在班级讲台上,宣布下午放假半天。(是不是会很开心?)可是,这时候你的班主任老师说了一句:放什么放,不放假,继续学习~~~那么,你们班又有几个人敢“私自放假”呢?优先级就如同这个——谁说话最“算数”。换到我们的CSS样式上,不同的选择器优先级不同,一起来了解一下吧~

需要掌握优先级的选择器种类

id选择器

类名选择器

标签名选择器

伪类选择器

通配符选择器

除了上面提到的几种基本选择器之外,我们还需要了解由基本选择器组成的群组、后代选择器的计算方法。另外,对于标签内部书写的样式优先级也需要有所了解。

基本选择器的优先级

在我们了解优先级之前,需要先了解表示优先级的方式方法。通常我们用四位数字表示优先级,一位一位的进行比较。如,一种选择器的优先级是 0 1 1 0,另一种选择器的优先级是 0 1 0 2,那么就从第一位开始比较,两者均是0,此时看第二位,都是1,第三位,前者为1,后者为0,1自然是比0大的,所以,前者的优先级级别更高。

1、id选择器。用四位数字表示id选择器的优先级就是:0 1 0 0。如:#con {}

2、类名选择器。用四位数字表示类名选择器的优先级就是:0 0 1 0。如:.h5course {}

3、标签名选择器。用四位数字表示标签名选择器的优先级就是:0 0 0 1。如:div {}

4、伪类选择器(如:hover等a标签常见的四种伪类)。用四位数字表示伪类选择器的优先级就是:0 0 1 0

5、通配符选择器(*)。当通配符单独出现的时候,其优先级为:0 0 0 0。如果它存在于后代选择器当中,涉及到优先级叠加运算的时候,其优先级为:0 0 0 1。

群组与后代选择器

群组选择器:群组选择器其实就是使用逗号将2个以及2个以上的选择器进行分隔。此时我们针对每个被分隔开的选择器单独进行优先级即可。

后代选择器:后代选择器涉及到一个优先级的叠加,但是注意,优先级数量不能进位,如何来理解呢?来看下面这个例子:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
.wrap div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div>HTML5学堂 - CSS选择器优先级</div>
</div>
</body>
</html>

在这个例子当中,.wrap div就是一个典型的后代选择器,这个后代选择器实际上是由一个id选择器和一个标签名选择器组成的,那么,id选择器的优先级是0100,标签名的优先级是0001,那么此时叠加在一起就是0101。

所谓不能够进位,就是即便这个后代选择器是由10个以上的类名选择器组成的,那么此时它的优先级也只能是0 0 10 0,而不是0 1 0 0。即不遵循逢十进一的原则,或者我们可以这么理解——只要出现一个老师(id),多少个班长(类名)的建议都得被驳回~~~(其他位置的选择器同理)

存在于style属性中的样式

看了半天的0101,细心的同学会发现,压根没有出现1000这类优先级啊,最高位,实际上就是为我们的标签内部书写的样式保留的,如果了解了CSS引入方式的同学,应该还记得,我们说过,标签内部样式的优先级最高~!没错,如果在标签内部以style属性的形式进行了样式的定义,那么这种样式是其他任何选择器都无法覆盖的~

同级别优先级,采用谁的样式

当多种选择器指向同一目标选择器的优先级相同时,后面的优先级大于前面的优先级;当同一个标签中定义有多个class名时,各个类选择器之间的优先级与html中的class名排列无关,而是与css文件中各个类选择器的排列有关。

这个道理和我们的生活也类似,老师上午10点钟过来宣布下午正常上课,11点钟过来宣布下午放假半天,你下午还会自己在这里上课么?~~~?

多个选择器选择到的标签,不同的样式怎么办

对于相同的样式,会产生覆盖,那么对于多个选择器中为同一个标签定义的不同样式呢?很简单,你的老师过来说,今天下午放假,你的班长过来说,下午请你一起去踢足球~两者不冲突,当然是照单全收啦~(即对于不同的样式,会全部生效)

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 选项卡 顶

注意:为了获得高质量的用户体验,选项卡条的用户必须将焦点设置为新显示的内容,以便1)选项卡不保留焦点样式,2)屏幕阅读器可以计算已更改的内容。

742
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

1273
来自专栏CRPER折腾记

Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

691
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

946
来自专栏大数据钻研

编写高性能HTML网页应用

你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可...

2494
来自专栏Nian糕的私人厨房

HTML 基础

超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用来创建并以可视化方式来呈现网页,它确定了一个网...

1803
来自专栏HTML5学堂

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还...

3346
来自专栏小狼的世界

IE6下实现Width:auto

看了这个题目,很多人肯定觉得有点太老土了,IE6都快到末路了,不过这个方法确实非常经典,我觉得很有必要记下一笔。

642
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

2915
来自专栏hbbliyong

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件  photo-sphere-viewer.js  ————————————————————————————————————...

4839

扫码关注云+社区