jquery - 防止子元素css重写

Question

我有两个 div。内部 div(绝对定位)位于外部 Div(相对定位)之下。 我在外部 div 上应用了 jquery 切换事件来显示和隐藏内部 div。我还想在单击完成时更改外部 div 的不透明度，然后在第二次单击时外部 div 不透明度应再次设置为正常。

但问题在于外部 div，内部 div 的不透明度也被设置，即使我在 css 中应用了重要标志也使子类更加具体。

这里是子类的CSS:

> div#child.childclass {
      position:absolute;
      display:none;
      width:100px;
      left:15px;
      top:-20px;
      background-color:red;
      font-size:12px;
      text-align:center;
      opacity:1 !important;
  }

fiddle 示例在这里:fiddle for above issue

谢谢

Answer 1

#container { position: relative; }  

div#parent {
      width:20px;
      background-color:green;
      height:20px;
      margin:50px;
      cursor:pointer;
      position:relative;
      border:1px solid black;
      border-radius:100%;
  }
  div#child.childclass {
      position:absolute;
      width:100px;
      left:15px;
      top:-20px;
      background-color:red;
      font-size:12px;
      text-align:center;
      opacity:1 !important;
  }
  .active {
      opacity:.5
  }

<div id="container">
    <div id="child" class="childclass">some text here</div>
    <div id="parent" class="active"></div>
</div>

简单地说，子元素不能具有比其父元素更大的不透明度。

一旦你设置了一个元素的不透明度，那么它，以及它的所有子元素(以及它的所有子元素的子元素，等等)将继承那个不透明度。

即使你这样做:

#parent { opacity:0.5; }
#child { opacity: 0.7; }

#child 实际上将具有 0.35 的不透明度(这是不透明度 0.5 的 70% - 其父项的不透明度)。

唯一的解决方案是在您的示例中使用 #child，而不是 #parent 的 descendent，如下所示:

http://jsfiddle.net/Lk8h0xxg/6/