logo标签列表

CSS中的inherit关键字是什么作用？

css
24

请问有人能够解释一下CSS中inherit关键字的含义以及工作原理吗？

2个回答
34

它将使用其父元素具有的相同属性值。

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> */
}
0
澄清一下，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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接