取消继承css
HTML中存在关系,而这些关系使我们可以选择和设置网页元素的样式。 当一个HTML元素嵌套在另一个元素中时,外部元素称为父元素,而内部元素是child元素。
<div>
<h>Heading</h>
<span>I am a span</span>
<p>This is a paragraph</p>
</div>
子元素本身可以成为另一个元素的父元素。
为什么所有这些序言和背景故事? 因为很重要!
在为父元素设置样式时,在某些情况下,样式将由其子元素继承。 我说一些情况是因为这种继承并不总是成立。
CSS继承的重要性
如果您曾经设置过网页内容的样式,则很有可能没有为每个必须显示文本的元素编写字体样式。 您可能仅将字体样式添加到了body元素,例如:
<body>
<div>
<h2>A h2 element</h2>
<p>A paragraph</p>
<div>
<p>Another paragraph</p>
</div>
</div>
<div>
<h3>A h3 element</h3>
</div>
</body>
如果您想为所有这些内容提供统一的字体样式,则只需设置body元素的样式即可:
body {
font-family: Arial, Helvetica, sans-serif;
}
这是可能的,因为跨HTML元素的继承。 这很有用,因为我们不必为div和标题重复相同的font
样式。 同样适用于color
样式,除非将不同的color
样式应用于子元素,否则将其应用于父元素时将应用于该父元素的子元素。
虽然继承使我们很轻松,但是如果所有CSS属性都以这种方式运行,事情就不会那么容易了。
这是另一个示例:
<ul class="main-list">
<li>Dairy</li>
<li>Vegetable</li>
<li class="sub-list">
Fruit
<ul>
<li>
Drupe
<ul>
<li>Peach</li>
<li>Coconut</li>
<li>Olive
</ul>
</li>
<li>
Berry
<ul>
<li>Tomato</li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
</ul>
谁知道Cucumber是浆果? 我们将对父级列表实现一些样式,并查看沿线继承的内容:
应用于无序列表的font
和color
样式由其子元素甚至其子元素继承。 但是, border
样式不是这种情况。
那么还有哪些其他属性可以继承?
继承属性的完整列表
根据W3C,这是可以继承的属性。
-
azimuth
-
border-collapse
-
border-spacing
-
caption-side
-
color
-
cursor
-
direction
-
elevation
-
empty-cells
-
font-family
-
font-size
-
font-style
-
font-variant
-
font-weight
-
font
-
letter-spacing
-
line-height
-
list-style-image
-
list-style-position
-
list-style-type
-
list-style
-
orphans
-
pitch-range
-
pitch
-
quotes
-
richness
-
speak-header
-
speak-numeral
-
speak-punctuation
-
speak
-
speech-rate
-
stress
-
text-align
-
text-indent
-
text-transform
-
visibility
-
voice-family
-
volume
-
white-space
-
widows
-
word-spacing
您可以在W3C的网站上找到有关此列表的更多信息(您绝对不需要记住所有这些信息!)。
如何强制属性继承
由于某些属性无法继承,因此您可能会认为解决办法是也将它们应用于子元素。 我们上面使用的样式可能如下所示:
.main-list {
border: 1rem solid #000;
color: red;
font-family: Verdana
}
.sub-list {
border: 1rem solid #000;
}
我们仍然在父级列表和第一个子列表上只有边框样式。 但是问题是我们不得不重复自己。 一遍又一遍地复制相同样式的痛苦变得显而易见。
一个好的解决方案是只需要对样式应用一次,最好是对父样式应用一次,并对子项进行一些调整以继承。 这样可以使所有物品保持干燥和清洁。
继承关键字
根据MDN文件:
“ Inherit CSS关键字使指定的元素从其父元素获取属性的计算属性。” – MDN
换句话说,这是一种声明应从元素的父级获取特定属性值的方式。 此关键字可以在任何 CSS属性上使用。
回到我们的示例,这是样式的显示方式:
.main-list {
border: 1rem solid #000;
color: red;
font-family: Verdana;
}
.sub-list {
border: inherit;
}
这样,结果将如下所示:
因此,如果需要更改边框样式,我们只需要在一个地方进行更改即可。
如何强制不继承属性
尽管可以对默认情况下不可继承的属性强制执行继承,但在某些情况下,最好不要这样做。 另一种选择是利用属性的初始值。
初始关键字
您可以使用initial
CSS关键字设置CSS属性的默认值或初始值。 这将导致该属性的继承值回到其初始值。
在此示例中,发生了几件事。 我们有两个div
元素,其红色属性由嵌套在其中的h1
和p
元素继承。 但是,我们还应用了全局h1
样式(蓝色),但是我们确保第二个h1
不会以以下方式继承这两种样式:
h1 {
color: blue;
}
div {
border: 1rem solid #000;
color: red;
font-family: Verdana;
margin-bottom: 10px;
}
.berries h1 {
color: initial;
}
我们在.berries
块中的h1
返回到浏览器最初应用的任何颜色。 看起来像这样:
其他CSS继承关键字
除了inherit
和initial
关键字之外,我们还可以使用revert
和unset
。 实际上,实际上建议使用这些替代方法,因为initial
会产生一些意外的结果。
未设定的关键字
unset关键字稍有不同。 它将元素的值重置为继承的值(如果已继承),如果没有则重置为其初始值。 再次是我们的示例:
h1 {
color: blue;
}
div {
border: 1rem solid #000;
color: red;
font-family: Verdana;
margin-bottom: 10px;
}
.berries h1 {
color: unset;
}
在这种情况下,第二个h1
的color
属性将恢复为其继承的值(红色),而不是其初始值(黑色):
还原关键字
最后,我们有revert
关键字,在大多数情况下,它的作用与unset
相似。 它将属性重置为其继承的值(如果它是从其父项继承的),或者重置为由用户自己的样式表(如果存在)建立的默认值,或者重置为浏览器的样式。
结论
当在样式表中声明样式规则时,会有很多地方可以使用该属性的值 。
从哪里获取样式取决于属性在继承方面的工作方式。 如果该属性是可继承的,则其值将来自其父对象,该父对象将在网络作者创建的样式表中声明。 否则它将来自第二或第三来源。
CSS中的继承可能会有些混乱! 希望本教程对您有所帮助。
取消继承css