- 1）层叠性
1，给一个标签设置的样式发生冲突的时候即样式的覆盖
2，浏览器的渲染机制是从上到下的，当有冲突的时候就采用最后的那个样式
<style type="text/css">
.two{
color: green;
}
.one{
color: red;
font-size: 30px;
}
.tree{
color: yellow;
font-size: 40px;
}
</style>
</head>
<body>
<p class="one two tree">
一段文字
</p>
结果是：只会有.tree的样式
- 2）继承性
1，发生的前提是：标签之间属于一种嵌套关系
2，文字颜色可以之间继承
3，字体大小可以继承
4，字体可以继承
5，行高也可以实现继承
与文字有关的属性都可以，实现继承
特殊点：
a标签超链接不能实现字体颜色的继承，字体大小可以继承
h1不可以继承文字的大小，继承过来还会做一个计算
<head>
<meta charset="utf-8">
<style type="text/css">
div{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<a href="">a</a>
</div>
</body>
- 3）优先级
1，默认样式<标签选择器 <类选择器 <id选择器 <行内样式 <！important
0 1 10 100 1000 1000以上
<head>
<meta charset="utf-8">
<style type="text/css">
.one{
color: pink;
}
#div1{
color: green;
}
p{
color: red !important;
}
</style>
</head>
<body>
<p id="div1" class="one" style="color:black">
文字
</p>
</body>
2，继承的权重为0；
<style type="text/css">
#one{
color: red;
}
.two{
color: pink;
}
</style>
</head>
<body>
<div id="one">
<p class="two">
fd
</p>
</div>
</body>
结果为：粉色
3，权重会叠加
.two{ 10
color: green;
}
div.one p{ 12
color: pink;
}
p.two{ 11
color: yellow;
}
p{ 1
color: red;
}
</head>
<body>
<div class="one">
<p class="two">
文字
</p>
</div>
</body>