如何覆盖父母的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); 
}