CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
当我们通过多种方式来定义一个样式属性时,浏览器通过以下规则来确定属性值。
继承优先级
继承来的样式越近的优先级越高,自身的样式优先级最高。继承的样式优先级低于选择器定义的样式。
选择器优先级
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 伪元素选择器 > 通用选择器(*)
- 当遇到多个约束条件的选择器时,相同优先级的选择器会抵消,然后对比剩下的选择器的优先级。
- 优先级一样时选择后定义的样式。
!important
!important
可以使一个属性的优先级最高,一般用于覆盖某个样式。以下例子的 .title
本来应该比 #name
低,但 important
使得其优先级更高。
<h1 id="name" class="title">三眼鸭的编程教室</h1>
<style>
#name {
color: red;
}
.title {
color: teal !important;
}
</style>
$$demo
<h1 id="name" class="title">三眼鸭的编程教室</h1> <style> #name { color: red; }
.title {
color: teal !important;
}
</style>
$$
$$warning
尽量不要使用 !important
,会导致其他开发人员无法覆盖此样式。如果需要覆盖某个样式时应使用优先级更高的选择器。
$$
分值计算法
有一个简单的判断优先级的方法,就是给不同的选择器定一个分值,最后把分值相加。
!important
:100000- 内联样式:10000
- ID 选择器:1000
- 类选择器 、 属性选择器 、 伪类选择器 :100
- 元素选择器 、伪元素选择器:10
- 通用选择器(*):1
- 继承的优先级:0
<h1 id="name" class="title red">三眼鸭的编程教室</h1>
<style>
#name.title {
/* 分值:1100 */
color: teal;
}
h1.title.red {
/* 分值:210 */
color: red;
}
</style>
$$demo
<h1 id="name" class="title red">三眼鸭的编程教室</h1> <style> #name.title { /* 分值:1100 */ color: teal; }
h1.title.red {
/* 分值:210 */
color: red;
}
</style>
$$
$$warning
分值计算法不是一个严谨的计算方法,只是为了方便判断。
比如 20 个类选择器也不会大于 1 个 ID 选择器的优先级,在使用上要谨慎。
$$
练习
- 以下文本的颜色是什么?
<div class="container">
<h1 class="title blue">三眼鸭的编程教室</h1>
</div>
<style>
div.container .title {
color: red;
}
h1.title.blue {
color: blue;
}
</style>
- 以下的
:hover
样式起效吗?为什么?
<h1 class="title red">三眼鸭的编程教室</h1>
<style>
h1.title.red {
color: red;
}
.title:hover {
color: green;
}
</style>
$$answer
不起效,因为 .title:hover
优先级低于 h1.title.red
的优先级,
$$