jquery - 使用css选择器时使用css继承？

Question

当我使用样式选择器方法时，如何使用 CSS 继承。

所以如果我想设置标签的样式，我可以像这样简单地做:.stylethis label{style}。但是我想从不同的类继承样式，就像我在我的 CSS 中尝试的那样，我试图从类“usethis”继承样式到“.stylethis label”..有点像这样

/* Make second-level headers green */
h2 { color: green; }

/* ...but leave those in the sidebar alone so they use their parent's */
#sidebar h2 { color: inherit; } 

我想这样做，除了在#sidebar h2 的地方我会把#sidebar '我的类(class)名称'？

.usethis{
color:red;
font-size:12px;
}

.stylethis label .usethis{
color:inherit;
font-size:inherit;

}

<div class="stylethis">

<label>jay chacko</label>

</div>

Answer 1

CSS 值的继承只能基于 DOM 结构(或 HTML，如果您愿意)从父级继承到子级。这是一个 CSS 继承的工作示例:

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    color: red;
}
.child {
    color: inherit;
}

我可能误解了您问题的某些部分，但如果您问是否可以将值从一个选择器“继承”到另一个选择器，答案是否定的。除非你使用预处理器，如 SASS 或 LESS，它们支持跨 CSS 选择器使用变量。 (除非我们讨论的是子元素继承其父元素的样式，如上)

为了详细说明您提供的示例，您可以包装一个 <h2>在侧边栏内并继承侧边栏字体颜色，如下所示:

h2 {
  color: green;
}
.sidebar {
  color: red;
}
.sidebar h2 {
  color: inherit;
}

<h2>Regular H2</h2>

<div class="sidebar">
  <h2>Sidebar H2</h2>
</div>