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

你需要使用！important值来实现它。

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

Answer 2

你应该看起来像这样

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

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

在此处查看http://jsfiddle.net/yNFUd/

Answer 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; 
}

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

继承自</h2> <h2> </h2>的<h2>类

3 个答案: