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