css样式的层叠和继承

CSS的层叠

1）浏览器求索css层叠的优先级

元素内嵌样式（用元素的全局属性style定义的样式）>文档内嵌样式（定义在style元素中的样式）>外部样式（用link元素导入的样式）>用户样式>浏览器样式；

2）用重要样式调整层叠次序

<a title="远地资产" href="http://www.shydzc.com">点击访问</a>

在样式声明后附上！important即可将对应属性值标记为重要。不管这种样式属性定义在什么地方，浏览器都会优先考虑

a{
color:black !important;
}

3）根据具体程度定义选择器中优先级

id值>类属性>元素名

4）具体程度相当，则采用后来者居上的规则

<a class="myclass1 myclass2" title="远地资产" href="http://www.shydzc.com">样式顺序</a>

a.myclass2{
color:white;
background: grey;
}
a.myclass1{
color: black;
}

显然，myclass1的color属性后来者居上。

CSS的继承

并不是所有css属性均可继承，有条经验可供参考：与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会被继承。

<p>我喜欢 <span>前端</span> 和用户体验。</p>

p{
color:white;
background: grey;
border:1px solid black;
}

强制继承 inherit,明确指示浏览器在该属性上使用父元素样式中的值

span{
border:inherit;
}