继承
CSS
样式规则的继承:如果我们的某个元素没有定义样式规则,当该元素的父级元素定义了,那么这个元素的样式就会继承父级元素定义的样式
html
<body>
<article>
<div>jlc</div>
</article>
</body>
<style>
article {
color: red;
}
</style>
<div>jlc</div>
标签没有设置样式,所以会继承父级的样式,因此字体颜色是红色的
注意:继承没有权重,如果子元素定义了任何的样式规则,都会在子元素上进行生效,断开父元素的继承
一般情况下,我们需要将网页当中大部分元素会应用到的场景,会在父元素中设置统一的样式(如字体大小,颜色等等),但是,有一些的属性是不会被继承的,如:边框,如果子元素需要边框,必须在子元素下进行设置边框样式
通配符与继承
通配符的权重是0000,继承的权重是无,0权重和无权重不是相等的,0权重大于无权重
html
<body>
<article>
<h2>
jlc
<span>111</span>
</h2>
</article>
</body>
<style>
* {
color: green;
}
h2 {
color: red;
}
</style>
上述例子中:
jlc
是显示红色的,111
是显示绿色的因为
<span>111</span>
标签没有设置自己的样式,所以会去继承h2
标签的样式,但是又存在通配符*
的所有标签的样式,其权重为0,大于继承的权重无,所有其内容会显示绿色