<h2> 类继承自通用 <h2>答案

【问题标题】：<h2> class inheriting from general <h2><h2> 类继承自通用 <h2>
【发布时间】：2013-07-25 17:51:02
【问题描述】：

我知道有人问过很多继承问题，但每个案例都是独一无二的，我在这个问题上遇到了麻烦。

我有一些 h2 元素需要对其具有独特的样式，但它们会继续从先前定义的 h2 元素继承属性。

我试过给他们一个独特的类，我试过通过 JS 和 Jquery 定义 css 属性，没有任何工作。

下面是我所说的一个例子：

<div class="parent">
    <h2>Original H2</h2>
    <div class="child">
        <h2>New H2</h2>
    </div>
</div>

.parent h2 {
    font-weight:bold;
    color:red;
}

.child h2 {
     font-weight:normal;
     color:green;
}

即使给孩子的 h2 标签一个独特的类，我也无处可去。

<div class="parent">
    <h2>Original H2</h2>
    <div class="child">
        <h2 class="newh2class">New H2</h2>
    </div>
</div>

.parent h2 {
    font-weight:bold;
    color:red;
}

.child h2.newh2class {
     font-weight:normal;
     color:green;
}

<!--or-->

h2.newh2class {
     font-weight:normal;
     color:green;    
}

有人可以帮忙吗？

【问题讨论】：

没有错：jsfiddle.net/SmUGm
他们继承了什么？
它们继承了字体样式和颜色。我会发布具体代码，但它与工作相关。
您可以在 CSS 中使用 >，这样样式只会应用于直系后代。例如.parent > h2 只会应用于您的第一个h2
这与继承无关。请解释问题是什么：您究竟希望实现什么，实际渲染与预期有何不同？

标签： css inheritance

【解决方案1】：

您需要使用 !important 值才能做到这一点。

h2.newh2class {
    font-weight:normal;
    color:green !important;    
}

【讨论】：

【解决方案2】：

你的 CSS 应该是这样的

.parent > h2 {
     font-weight:bold;
     color:red;
}

.child h2 {
      font-weight:normal;
      color:green;
}

在这里查看http://jsfiddle.net/yNFUd/

【讨论】：

【解决方案3】：

您的问题是 CSS，因为您引用元素的方式。阅读stacking and precedence in CSS

http://jsfiddle.net/feitla/SmUGm/2/

.parent > h2 {
     font-weight:bold;
     color:red;
}

.parent .child h2 {
      color:blue;    
}

.child > h2 {
      font-weight:normal;
      color:green; 
}

更改顺序和调用方式将影响它们的继承和计算方式。

【讨论】：