继承、优先级、层叠

继承

假设要将页面中所有文字的字体设为微软雅黑

body{font-family:"Microsoft Yahei";} 应用到body所有的子元素上去

继承属性

- color

- font

- text-align

- list-style

-...0

非继承属性

- background

- border

- position

- ...

优先级

计算方法

- a=行内样式

- b=ID选择器的数量

- c=类、伪类和属性选择器的数量

- d=标签选择器和伪元素选择器的数量

value=a*1000+b*100+c*10+d

CSS层叠

相同的属性会覆盖

- 优先级

- 后面覆盖前面

不同的属性会合并

p{

    color:blue;

    text-align:left;

    font-weight:bold;

}

p.special{

    color:red;

    text-align:right;

}

p:first-child{color:green;}

合并：{font-weight:bold;text-align:right;color:green;}

CSS改变优先级

<p class="tip special">提升选择器的优先级</p>

改变先后顺序 后面的选择器覆盖掉前面的样式

.special{color:red;} 优先

.tip{color:red;}

提升选择器优先级

p.special{color:red;} 优先

!important 最后使用

tip{color:blue !important;}