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;
}