我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。
今日学习目标
昨天对于 CSS
有一个基础了解,今天准备对于 CSS 选择器有一个完整了解,又是适合学习的一天,加油,小又又!!!!
CSS 选择器
7 种基础的选择器
ID 选择器, 如
#id{}
, 为标有特定id
的HTML
元素指定特定的样式类选择器, 如
.class{}
, 为一组HTML
元素指定特定的样式属性选择器, 如
a[href="segmentfault.com"]{}
伪类选择器, 如
:hover{}
伪元素选择器, 如
::before{}
标签选择器, 如
span{}
通配选择器, 如
*{}
3 种组合的选择器
后代选择符:
.father .child{}
子选择符:
.father > .child{}
相邻选择符:
.bro1 + .bro2{}
注意事项!!!
ID属性
不要以数字
开头,数字
开头的ID
在Mozilla/Firefox
浏览器中不起作用。类名
的第一个字符不能使用数字
!它无法在Mozilla/Firefox
中起作用。
CSS 的继承性
- 最近的祖先样式比其他祖先样式优先级高
直接样式
比祖先样式
优先级高
CSS 优先规则1
最近的祖先样式
比其他祖先样式
优先级高。
CSS
的继承特性指的是应用在一个标签上的那些 CSS
属性被传到其子标签上。看下面的 HTML
结构:
<div>
<p></p>
</div>
如果 <div>
有个属性 color: red
,则这个属性将被 <p>
继承,即 <p>
也拥有属性 color: red
。
由上可见,当网页比较复杂, HTML
结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
CSS 优先规则2
直接样式
比祖先样式
优先级高。
如果我们把一个标签从祖先
那里继承来的,而自身没有的属性叫做祖先样式
,那么直接样式
就是一个标签直接拥有的属性。
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
选择器的优先级
- 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 计算选择符中
a
、b
、c
种类型的个数来统一判断优先级 - 有
!important
的属性拥有最高优先级
CSS 优先规则3
优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
!important
规则例外~~
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
最终的 color
为 black
,因为内联样式比其他选择器的优先级高。
CSS 优先规则4
计算选择符中a
、b
、c
种类型的个数来统一判断优先级。
- 计算选择符中
ID 选择器
的个数(a
), - 计算选择符中
类选择器
、属性选择器
以及伪类选择器
的个数之和(b
), - 计算选择符中
标签选择器
和伪元素选择器
的个数之和(c
)。
按 a
、b
、c
的顺序依次比较大小,大的则优先级高,相等则比较下一个。
若最后两个的选择符中 a
、b
、c
都相等,则按照就近原则
来判断。
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
由规则 4
可见,<span>
的 color
为 red
。
这一段看着好麻烦
如果外部样式表
和内部样式表
中的样式发生冲突会出现什么情况呢?
这与样式表在 HTML
文件中所处的位置有关。
样式被应用的位置越在下面,则优先级
越高,其实这仍然可以用规则 4
来解释。
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css">
<style type="text/css">
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
从顺序上看,内部样式在最下面,被最晚引用,所以 <div>
的背景色为 blue
。
上面代码中,@import
语句必须出现在内部样式之前,否则文件引入无效。当然不推荐使用 @import
的方式引用外部样式文件。
CSS 优先规则5
CSS
还提供了一种可以完全忽略以上规则的方法,当一定、必须确保某一个特定的属性要显示时,可以使用这个技术。
属性后使用了 !important
的拥有最高优先级
。
若同时插有 !important
,则再利用规则 3
、4
判断优先级
。
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
虽然 .father .son
拥有更高的权值,但选择器 p
中的 background
属性使用了 !important
, 所以 <p>
的 background
为 red
。
建议
Always
要优化考虑使用样式规则的优先级来解决问题而不是!important
Only
只在需要覆盖全站或外部css
(例如引用的ExtJs
或者YUI
)的特定页面中使用!important
Never
永远不要在全站范围的css
上使用!important
Never
永远不要在你的插件中使用!important
错误说法
在学习过程中,可能发现给选择器
加权值
的说法。
即 内联样式表
的权值最高 1000
, ID 选择器
权值为 100
,类选择器权值为 10
,标签选择器权值为 1
,当一个选择器由多个 ID 选择器
、类选择器
或标签选择器
组成时,则将所有权值
相加,然后再比较权值
。
这种说法其实是有问题的!!!!
比如一个由 11
个类选择器
组成的选择器和一个由 1
个 ID 选择器
组成的选择器指向同一个标签,按理说 110
> 100
,应该应用前者的样式,然而事实是应用后者的样式。
错误的原因是:权重
的进制是并不是十进制
,CSS 权重
进制在 IE6
为 256
,后来扩大到了 65536
,现代浏览器则采用更大的数量
。
还是拿刚刚的例子说明~~~
11
个类选择器
组成的选择器的总权值为
110,但因为
11个均为
类选择器,所以其实
总权值最多不能超过
100, 你可以理解为
99.99,所以最终应用
后者`样式。
总结
- A 选择器都有一个权值,权值越大越优先;
- B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
- C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式
- D 继承的CSS 样式不如后来指定的CSS 样式;
- E 在同一组属性设置中标有
!important
规则的优先级最大
今日学习总结
- css选择器主要有基础选择器(7)和组合选择器(10)。
- 一个标签的样式受到的影响可能来自周围的标签,也可能来自其自身。
- 要了解 CSS 样式继承性
- 要了解 CSS 样式的不同选择器的权重优先级
今日心情
今天对于 CSS 选择器有了一个基础了解,希望明天能对于属性声明这块更多的学习一下~~~
本文使用 mdnice 排版