在css中有三大特性,分别是继承性,层叠性以及选择性。下面是我对css三大特性的一些理解:
1、继承性
在css中,所谓继承性指的是:子元素可以拥有父元素的一些属性。这里我用到一些而不是全部,不难看出并不是所有的属性都可以被继承。在CSS中以text-、font-、line- 开头的属性是可以被继承的。
常见的继承属性
字体相关:line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关: letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关:list-style-image, list-style-position, list-style-type, list-style
还有一个比较重要的:color
测试用例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<h1>Vue</h1>
<p>React</p>
<span>Angular</span>
</div>
</body>
</html>
显示结果:
React
Angular
2、层叠性
- 什么是层叠性?
CSS处理冲突的一种能力,这个我们称之为层叠性。 - 什么情况出现层叠性?
只有在多个选择器中“同一个标签”,又设置了“相同的属性”的时候,就会发生层叠性 - 发生层叠性会怎么样?
当发生层叠性时,哪个选择器设置的属性起作用,是由优先级来确定
所谓层叠性指的是:浏览器处理冲突的一个特性,如果一个属性通过多个选择器设置到同一个元素上面,那么这个时候就会只有一个选择器起作用,而其他的选择器都将被层叠(覆盖)掉,前提是选择器的权重一样,也就是说这些选择器的优先级相同
测试用例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<div>
<h1>Vue</h1>
<p>React</p>
<span>Angular</span>
</div>
</body>
</html>
显示结果:
React
Angular
3、选择性
选择器的特殊性值表述为4个部分,用0,0,0,0表示:
- 行间样式,加1,0,0,0;
- ID选择器的特殊性值,加0,1,0,0;
- 类选择器、属性选择器或伪类,加0,0,1,0;
- 元素和伪元素,加0,0,0,1;
- 通配选择器*对特殊性没有贡献,即0,0,0,0;
- 最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。