Web前端开发笔记-----9.css样式继承

文章目录

• Web前端开发笔记-----9.css样式继承
• 一、css样式继承
• 二、css优先级

---

一、css样式继承

css样式继承：
文字相关的样式可以被继承 如：字体样式，颜色
布局相关的样式不能被继承 如：大小，边框
默认是不能继承的，但是可以设置继承属性 利用inherit值。

<style>
        div{width: 300px;height: 300px;border: 1px solid red;font-size: 20px;}
</style>
<div>
        <p>这是一个段落</p>
</div>

inherit属性的使用：

<style>
        div{width: 300px;height: 300px;border: 1px solid red;font-size: 20px;}
        p{border: inherit;}
</style>
<div>
        <p>这是一个段落</p>
</div>

二、css优先级

1.相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
3.单一样式优先级
style行间 > id > class > tag > * >继承

样式	权重
style行间	1000
id	100
class	10
tag	1

<style>
        #elem{color: yellow !important;}
</style>
<div id="elem" style="color: blue;">这是一个块</div>

此时id样式的优先级将被提高。
注：不能针对继承的属性进行优先级的提升。即继承样式后加!important没用。

4.标签+类与单类
标签+类 > 单类

<style>
        #elem{color: yellow ;}
        div#elem{color: blue;}
</style>
<div id="elem" >这是一个块</div>

6.群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。

<style>
div,p{}
div{}             /*后写的优先级高*/
</style>

7 .层次优先级

a.权重比较
ul li .box p        权重：1+1+10+1
div span #elem     权重：1+1+100
注：这里的1和10不能用进制转换，1*10<10。

b.约分比较
ul li .box p       ul li .box p
div span #elem    div span #elem
将相同权重标签约去，比较结果。