如何覆蓋父母的CSS屬性並將其應用於特定的子元素屬性？

Question

我將.jumbotron類別的不透明度設置爲opacity: 0.9;，並且其子元素經過。在這種情況下，如何設置特定的子元素來覆蓋父級的屬性值。我嘗試使用!important，.jumbotron a,.jumbotron p + p,.jumbotron nth:child(3)，但他們都沒有完全工作。它會將按鈕更改爲小於0.9的較低不透明度，但不是1，它假定爲實心或換句話說不顯示透明度。有沒有其他辦法可以解決這個問題？下面是我嘗試使用對焦代碼：

CSS：

.jumbotron{ 
     background-color: white; 
     color:black; 
     opacity:0.9; 
     border-radius:0px 0px 10px 10px; 
    } 
.jumbotron a, .jumbotron p + p, .jumbotron :nth-child(3){ 
     opacity: 1 !important; 
    } 

HTML：

<div class="jumbotron"> 
    <h1 style="color:black;">Welcome!</h1> 
    <p>We're an awesome company that creates virtual things for portable devices.</p> 
    <p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p> 
</div> 

替代方法解決方案：

看樣子你不能覆蓋的不透明度價值當一個孩子的元素父母的元素值已被設置。例如，.jumbotron（父級）設置爲opacity:0.9和.jumbotron p + p（第2個子元素）[或任何其他用於覆蓋該值的值]設置爲opacity: 1 !important，如我在上面的代碼中所看到的那樣無效！設置它< 1將工作。但是，在其他css屬性，如color，margin等，它將覆蓋。有了這樣說，一個解決方法是專門把按鈕出.jumbotron的，並與相應的CSS屬性的新DIV，如下面所示：

#divbtn{ 
     position:absolute; /*type of position to freely move the element about*/ 
     top:290px; 
     margin-left:30px; 
    } 

<!--opacity cannot be overridden on a child element when the parent's element is set, so I made a new div outside of .jumbotron and make it appear as if it's in .jumbotron without opacity being affected.--> 
<div id="divbtn"> 
    <p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p> 
</div> 

Answer 1

我會推薦給jumbotron類中的每個元素都是一個普通的類。例如，如果類將被命名CLASS_NAME，那麼CSS會爲─

.class_name{ 
      opacity:1; 
      } 

如果你不明白我的答案，或者這didnt解決您的問題，只是評論如下。

Answer 2

孩子將永遠繼承父母的不透明度。這意味着你不能爲子元素設置不透明度。

另一種解決方法是使用opacity而不是使用rgba方法。

但是，這是一種解決方法，看一看，可能會爲你工作。檢查DEMO。

.jumbotron{ 
     background-color: white; 
     color:black; 
     border-radius:0px 0px 10px 10px; 
     position: relative; 
     width:100%; 
    } 

.container { 
    position:relative; 
    width:100%; 
} 
.holder { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    width:100%; 
    background-color:#FFF; 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
    z-index:1; 

} 
.jumbotron p:last-of-type{ 
    position: relative; 
    width:100%; 
    z-index:2; 
    opacity: 1; 
    filter:alpha(opacity=100); 
}