CSS的三大特性
1.层叠性
代码由上向下执行，相同选择器设置到同一元素上，样式冲突的，会执行比较靠近html的样式，样式不冲突的情况下不影响
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
width: 200px;
background-color: black;
}
.box1 {
background-color: red;
width: 100px;
height: 100px;
}
.box1 {
background-color: pink;
}
</style>
<div id="box">
<div class="box1">11</div>
</div> </body>
</html>
2.继承性
CSS具有继承父类元素的特性，如 字体大小，颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
font-size: 30px;
}
.box1 { width: 100px;
height: 100px;
}
</style>
<div id="box">
<div class="box1">继承性</div>
</div> </body>
</html>
3.优先级
- 继承样式的权重为0 ，
- 行内样式，style属性的元素，行内样式权限非常高
- !important命令，拥有最大的优先级
|
Div ul li |
0,0,0,3 |
|
.nav ul li |
0,0,1,2 |
|
a:hover |
0,0,1,1 (伪类) |
|
.nav a |
0,0,1,1 |
|
#nav p |
0,1,0,1 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
font-size: 30px;
color: #ffbbff !important;
}
.box1 {
width: 100px;
height: 100px;
color: red;
}
</style>
<div id="box">
<div class="box1">优先级</div>
</div> </body>
</html>