浏览器控制面板介绍
一、css继承性
CSS 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。
继承性：对某个元素所设定的样式，不但影响该元素本身，还影响该元素的后代元素。即如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。•能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
示例：
<style>
div {
width: 200px;
height: 200px;
background-color: red;
color: yellow;
font-family: "宋体";
font-size: 20px;
}
</style>
我们可以看到如上图运行结果，只是把文字样式继承了，并没有继承盒子模型的样式。
继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>，后期所有的后代标签都可以从 <body> 进行继承。
body {font‐size: 14px;font‐family: "微软雅黑";color: red;}二、css层叠性
层叠性：对同一元素同一属性的设定，后设定的某个样式（属性），会覆盖之前设定的样式。
思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？
解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
判断最终胜出的属性是谁，需要依赖判断优先级。
判断方法：
1.选中目标标签
第一步：比较多个选择器的权重，权重高的层叠权重低的。•基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器。•高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。 •比较顺序：( id 个数, 类的个数, 标签的个数 )
第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。
示例1：验证选择器的优先级
* < 标签选择器 < 类选择器 < id 选择器（选择范围越大，权重越低，所以id权重是最高的。）
示例2：验证比较顺序：( id 个数, 类的个数, 标签的个数 )，先验证id，如果id验证出来谁大，那就确定了优先级，如果没有验证出谁大谁小，即大小一致的时候，继续开始从类验证，以此类推进行验证，直到验证出优先级。
示例3：验证当选择器权重一致的时候，后写的会覆盖先写的。
2.选中目标标签的组先级
如果选择器选中的是祖先元素，文字的样式可以被继承。
第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。
第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。
第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
示例1：就近原则
示例2：比较选择器权重
示例3：书写顺序
3.! important 关键字
如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS 样式属性的权重提升到最大。
书写位置：在某个css属性的属性值后面空格加 !important 。
注意：① 就近原则中，不需要比较选择器权重，所有 important 会失效。
② important 不能提升选择器的权重，只能提升某条属性的权重到最大。
示例：
4.行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。但是，与 !important 关键字相比权重要低。
示例：
三、优先级（权重）
样式优先级：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
测试CSS样式优先级案例一：三个样式都写，显示内联样式（行内样式）
测试CSS样式优先级案例二：不写内联样式，只写内部样式和外部样式（将link标签放在style标签之前）
测试CSS样式优先级案例三：不写内联样式，只写内部样式和外部样式（将link标签放在style标签之后）
3381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
