请问有人能够解释一下CSS中inherit
关键字的含义以及工作原理吗?
它将使用其父元素具有的相同属性值。
body {
margin: 234px;
}
h1 {
margin: inherit; /* this equals 234px in this instance */
}
<body>
<h1></h1>
</body>
如果文件中有多个 <h1>
实例,它将采用其父元素的边距,因此234px并不总是它的值。例如:
<body>
<h2></h2>
<div>
<h2></h2>
</div>
</body>
body {
margin: 20px;
}
div {
margin: 30px;
}
h2 {
margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}
inherit
只有在用于覆盖另一个样式规则时才会起作用,否则它只是强化默认行为。请注意,覆盖规则应具有更高的特异性或位于要覆盖的规则下方。
.pink {
background-color:pink;
}
.green {
background-color:lightgreen;
}
.override {
background-color:inherit;
}
<div class="pink">
<p class="green">I'm classed "green", and I am green.</p>
<p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>