css - 如何将不透明度应用于 div 及其所有子元素，除了一个 div 是父元素的子元素

Question

我正在尝试将不透明度应用于父 div，但不应用于其子 div 之一...我在这里制作了一个演示 http://plnkr.co/edit/rLjuSo9336Qe67fXlkPe?p=preview我在 maindiv 上应用不透明度，效果很好，但我不想将不透明度应用到 div，所以将特定 div 不透明度的不透明度设置为 1，但这不起作用......我怎么能忽略父项的不透明度分...

<div id="mainDiv">
  <div>div 1</div>
  <div>div 2</div>
  <div>
    <div id="div3">
     <input type="text" />
  </div>
  </div>
  <div>div 4</div>
</div>

在上面的代码中，我想将不透明度应用于 maindiv 及其所有子元素，但不应用于具有 id="div3"的 div...有人请帮助我谢谢..!

Answer 1

如果您只想使用 CSS 而不使用其他任何东西，那您就不走运了。这是MDN has to say about it .

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

但是，根据您实际想要实现的目标，您仍然很有可能做到。以这样一种方式更改您的 HTML，使您不希望其不透明的元素不是具有不透明度的元素的子元素。