1、继承：
有一些属性，当给自己设置样式的时候，自己的后代也都继承上了该样式，这个就是继承性。那么哪些属性是能够继承的呢？比如：color、 text-开头的、line-开头的、font-开头的等。这里强调一下font-size这个属性(虽然也有继承，但是标签不同继承的效果也不一样)，比如下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fonts {
font-size: 20px;
}
</style>
</head>
<body>
<div class="fonts">
<p id="p">我的字体大小为20px</p>
<h1 id="h1">我的字体大小为40px</h1>
</div>
</body>
</html>
我给p和h1标签的父元素div设一个font-size为20px，p没有问题，继承了div的20px，但h1却变为了40px，我们从下面的JS代码可以获取：
getComputedStyle(document.getElementById('h1')).fontSize ==> "40px"
getComputedStyle(document.getElementById('p')).fontSize ==> "20px"
为什么h1会是40px呢？因为h1的默认font-size为2em（32px），我们知道em是相对单位，因此我们给h1的父级div设了20px，所以通过继承h1的最终font-size为20*2=40px，要想使h1的标签字体大小也等于父标签div，只需设置h1 {font-size:100%;}。
2、权重：
权重加权值（优先级）的介绍网上有很多，我们这里只简单介绍一下，当选择器直接选中了某个元素的时候，要这么统计权重：id的数量（每一个为 1，0，0），类的数量（每一个为 0，1，0），标签的数量（每一个为 0，0，1），如果不是直接选中某个元素，而是通过继承性影响的话，那么权重为0。更简单的就是记住如下优先顺序就好了：
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3、层叠：
就是css处理冲突的能力，当同一个元素被两个或更多个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器，权重低的选择器效果会被权重高的选择器效果覆盖（层叠），相同权重下一般遵循就近原则，即如果权重一样，那么以后出现的为准：
内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式表(外部文件中)。
网友评论