从一般<h2>继承的<h2>类

Question

我知道很多继承问题已经被问到了，但是每一个案例都是独一无二的，我对此感到很困难。

我有一些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;    
}

有人能帮忙吗？

Answer 1

你需要使用！重要的价值才能做到这一点。

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

Answer 2

你的css应该是这样的

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

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

看看这里，http://jsfiddle.net/yNFUd/

Answer 3

您的问题是CSS，因为您是如何引用元素的。阅读关于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; 
} 

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