有办法去掉从父级元素继承下来的 CSS 样式吗
在div里给它加上一个类,给新加的类写样式。
在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。
首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。如下图所示,如果继承了边框属性,那么文档看起来就会很奇怪,除非采取另外的措施关掉边框的继承属性。
多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。
扩展资料
CSS中的样式覆盖原则:
规则一:由于继承而发生样式冲突时,最近祖先获胜(最近原则)。
strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。
规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜(最直接原则)。
strong {color:red;}
那么根据规则二,strong中的文字最终显示为红色。
规则三:直接指定的样式发生冲突时,样式权值高者获胜。
样式的权值取决于样式的选择器,权值定义如下表。
css选择器 权值
标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10
可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如”#nav .current a”的权值为100 + 10 + 1 = 111。
2016-09-13 · 知道合伙人软件行家
w3c标准中可以继承的css样式是不能够设置不继承的。例如文字大小样式:font-size,如果没有继承特性会使css规则变得非常复杂化,具体解决方案:
1.单独设置子元素样式,覆盖父元素继承下来的样式。
2.合理设置外层html元素的css样式,避免为后续元素带来重复的设置和不利因素。
3.公用可复用的组件,公用可复用的css样式,例如元素字体大小的设置可以写成如下方式:
.f12,.f14,.f16,.f18,.f20,.f24{ font-weight: normal; color: #333333; font-family: "Microsoft YaHei","微软雅黑";}
.f12{ font-size: 12px;}
.f14{ font-size: 14px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f20{ font-size: 20px;}
.f24{ font-size: 24px;}
<div class="f24">
<p>这里继承了24号字体样式</p>
<span class="f12">这里被重写定义为12号文字</span>
</div>