CSS核心原理

1.优先原则：

后解析的内容，会覆盖掉之前解析的内容；

同一个选择器：文件执行从上往下，后面的样式会覆盖前面的；

如下例中color最终为粉色；

div {

color:red;

color:pink;

}

　同一类型的选择器：从上往下，如下例中color最终为绿色；

div {

color:red;

}

div {

color:green;

}

背景颜色最终为绿色，（解析顺序与css文件中的排列有关，从上到下）

<div class="txt2 txt1"></div>

.txt1 {

background:red;

}

.txt2 {

background:green;

}

不同类型的选择器：先解析低优先级的选择器，后解析高优先级的选择器；（*<标签<class<id）

　因此有冲突时，最终生效的会的高优先级的选择器定义的样式；

外部样式与内部样式：合并之后一起解析先外部样式后内部样式再从上往下执行

因此有冲突时，最终应用的是内部样式

内联样式：只有外部样式与内部样式解析完成后，才解析内联样式

因此有冲突时，最终应用的是内联样式。

加了 !important 字段：最后解析

因此有冲突时，最终应用的是加了 !important 字段的样式。　

2.继承原则：

嵌套里面的标签会拥有外部标签的某些样式，即子元素会继承父元素的某些样式

1）与文字文本样式有关的，可以被继承，其他不能被继承；

2）对于块级元素，如果宽度未设置，会继承最近父元素的宽度，高度未设置，由内容决定；

巴特西