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

Question

我正在尝试将不透明度应用于父div但不应用于其中一个子div ...我在这里做了一个演示http://plnkr.co/edit/rLjuSo9336Qe67fXlkPe?p=preview我将不透明度应用于maindiv，它完美地工作但我不想要将不透明度应用于div，使特定div不透明度的不透明度为1，但那不起作用......我怎样才能忽略父div的不透明度...

<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 =＆＃34; div3＆＃34;的div。有人请帮助我 谢谢..！

Answer 1

如果你只想用CSS做这件事而没有别的，那你就不走运了。这是MDN has to say about it。

  

该值适用于整个元素，包括其内容，   即使该值不是由子元素继承的。因此，一个   元素及其包含的子元素都具有相同的不透明度   到元素的背景，即使元素及其子元素   不同的不透明度相互之间。

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