Ich möchte die Deckkraft des untergeordneten Elements nicht von dem übergeordneten Element in CSS übernehmen

Question

Ich möchte die Deckkraft des untergeordneten Elements nicht von dem übergeordneten Element in CSS erben.

Ich habe ein Div, das das Elternteil ist, und ich habe ein anderes Div innerhalb des ersten Divs, das das Kind ist.

Ich möchte die Eigenschaft Opazität im übergeordneten Div festlegen, aber ich möchte nicht, dass das untergeordnete Div die Eigenschaft Opazität erbt.

Wie kann ich das tun?

Answer 1

Weisen Sie dem Kind rekursiv mit die Deckkraft 1,0 zu:

div > div { opacity: 1.0 }

Exemple :

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">
  <div style="background-color: #0f0; padding:20px;">
    <div style="background-color: #00f; padding:20px;">
      <div style="background-color: #000; padding:20px; color:#fff">
         Example Text - No opacity definition
      </div>
    </div>  
  </div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
  <div style="opacity:0.5; background-color: #0f0; padding:20px;">
    <div style="opacity:0.5; background-color: #00f; padding:20px;">
      <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
        Example Text - 50% opacity inherited
      </div>
    </div>  
  </div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
  <div class="x" style="background-color: #0f0; padding:20px;">
    <div class="x" style="background-color: #00f; padding:20px;">
      <div class="x" style="background-color: #000; padding:20px; color:#fff">
         Example Text - 50% opacity not inherited
      </div>
    </div>  
  </div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
  Example Text - 50% opacity
</div>

Answer 2

Für andere, die versuchen, eine Tabelle (oder etwas anderes) mit Hilfe der Deckkraft auf eine Zeile zu konzentrieren. Wie @Blowski sagte, verwenden Sie Farbe, nicht Deckkraft. Schauen Sie sich diese Fiddle an: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)