为什么id不会在bootstrap中覆盖类？

我正在开发前端Web开发并继续遇到同样的问题。我使用bootstrap样式规则（bootstrap.css）进行了一些修改。为什么id不会在bootstrap中覆盖类？

HTML

<div class="container"> 
    <div class="jumbotron"> 
     <button type="button" id="jnav">Restricted</button> 
    </div> 
</div>

的style.css

#jnav{ 
    opacity: 1; 
}

从bootstrap.css

.jumbotron { 

opacity: 0.75; 


}

基本上，我想用ID来覆盖的不透明度，从而使该按钮会具有1的不透明度，而其余的超大号不透明度为0.75。问题是，按钮的不透明度保持在0.75（所以它和jumbotron背景一样烦人）！有谁知道发生了什么事？有什么基本的，我失踪了？我认为这个id是一个更具体的属性，它会覆盖类的样式。

来源

2014-07-16 Neal

不透明度与继承的值复合。所以你的'＃jnav'会有效地得到'1 * 0.75' - 如果你把它设置为'0.5'，它会得到'0.5 * 0.75' - 有趣的是你不能给它一个像'2'这样的值，期望它变得完全不透明。 – techfoobar

不透明度不会像color或background一样继承。设置元素的透明度使得该元素及其包含的所有内容都呈现在相对于其背后的任何不透明度处。智利元素的不透明属性然后像@techfoobar所说的那样计算。你可以阅读更多here。

基本上，你需要做的是设置opacity为.jumbotron每个孩子单独离开时的.jumbotron的opacity在1

来源

2014-07-16 00:32:22

很高兴知道...更恼人的，但它绝对奏效 – Neal

通常Bootstrap.css中使用的选择器是非常具体的。选择器可能类似body > div > .jumbotron这非常具体。在这种情况下，简单地使用元素Id将不会覆盖CSS。您需要匹配特异性或更具体。例如body > div > #jnav将有效地覆盖CSS，因为它们都具有相同的特定性。

这当然假定您要使用的CSS来自您要替换的CSS。或者在同一个css文件中，或者在基本Bootstrap.css之后包含一个单独的css文件。

万一出现最坏的绝对最坏的情况，那么你可以使用：

#jnav{ 
    opacity: 1 !important; 
}

但这不应该需要发生，除非你是绝对的绝望。

来源

2014-07-16 00:30:26 CarlosCervantes

在这种情况下，特异性不是问题。它的透明度从父级jumbotron传递。唯一能够使强光宝宝的孩子完全不透明的方法是压倒强光宝石本身的不透明性。 – techfoobar

很难说在有限的信息，但它听起来像是你试图在具有不透明度的jumbotron中放置一个按钮（#jnav）。由于jumbotron的不透明度为0.75，因此不管其他规则如何，它内部的所有内容都将遵循相同的不透明度。这不是类/ ID特性或引导的问题，更多的是一般的造型细微差别。

基本上Jcubed刚刚在上面说过。

来源

2014-07-16 00:32:52 Aender

它们不互相覆盖。他们都申请，但#jnav在.jumbotron。所以.jumbotron的不透明度将应用于＃jnav的不透明度之上。

如果你只是想要的效果，你应该使用RGBA

例子：

#jnav{ 
    background: rgba(111, 111, 111, 0.1); 
}

最后一个指标是背景的不透明度，并不会与您的字体重叠。

来源

2014-07-16 00:34:52 Edward

#jnav确实具有不透明度为1.但从某种意义上说，相对于其母公司.jumbotron而言，其不透明度为0.75。

正如techfoobar提到的，不透明度与继承的价值复合。因此，#jnav的不透明度将有效地为1 * 0.75。

Here's what MDN has to say：

中的数值适用于元素作为一个整体，包括它的内容，即使该值不是由子元素继承。因此，即使元素及其子元素具有相互不同的不透明度，元素及其包含的子元素也相对于元素的背景具有相同的不透明度。

查看this question，如果你想达到一个透明背景，但不是内容效果。

来源

2014-07-16 00:43:28

为什么id不会在bootstrap中覆盖类？

回答

相关问题