一.CSS的三大特性
1.css层叠性
css的层叠性是指css样式的叠加
话不多说看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css层叠性</title>
<style type="text/css">
div {
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>hello,world</div>
</body>
</html>
请问上面显示的是什么颜色呢?没错是蓝色,这就是css的层叠性,是指浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,这时候一个属性就会将里一个属性层叠掉
一般情况下,如果出现样式冲突,则会按照css书写顺序,以最后的样式为准。
2.css继承性
继承性是指子标签会继承父标签的某些样式
其中子元素可以继承父元素的样式有text-、font-、line-、color这几个是可以继承父元素的
3.css优先级
在写css时我们经常会写很多个股则在同一个元素上,比如.nav p ul li{font-size: 14px}那么这时候就会涉及优先级的问题了。
1.说到优先级我们就要来说一下权重的问题了
我们先来说一下继承权重,继承的权重为0,看下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承权重</title>
<style type="text/css">
.nav {
font-size: 100px;
}
a {
font-size: 30px;
}
</style>
</head>
<body>
<div class="nav">
<p>
<a href="#">百度</a>
</p>
</div>
</body>
</html>
这里.nav的权重是高于a的,但是为什么显示的是30px的大小呢因为本来的100px是a标签继承祖父div的,但是继承的权重为0,a标签的权重为1,所以就会显示a标签的
2.行内样式优先,行内元素的权重都非常高
3.权重相同时,css遵循就近原则,就是说靠近元素的具有最大的优先级,或者说排在最后的样式优先级最大
4.css中有一个!important命名,该命令被赋予最大的优先级无论何种情况!important都有最大的优先级
3.1css特殊性
css特殊性相当于4个jibie,值从左到右,左面的最大,一级大于一级数位之间没有进制,级别之间不可超越。(0>0>0>0)
继承或者*的贡献值 | 0,0,0,0 |
---|---|
每个元素的(标签)贡献值 | 0,0,0,1 |
每个类(class),伪类(:hover)贡献值 | 0,0,1,0 |
每个ID的贡献值 | 0,1,0,0 |
每个行内贡献值 | 0,1,0,0 |
每个!important贡献值 | 无穷大 |
其中权重是可以叠加的。
请看一下下面的例子
div ul li---------> 0,0,0,3
.nav ul li-------->0, 0 ,1 ,2
a:hover ---------> 0 ,0 ,1 ,1
#nav p----------->0 ,1 ,0,1
**注意:**数位之间没有进制的,比如说0,0,0,5+0,0,0,5=0,0,0,10这个依然小于0,0,1,0的
**总结一下优先级**
!important > 行内样式 > id选择器 > 类选择器(class)、伪类选择器 > 标签选择器 > 通配符选择器(*)>