Question

我正在开发前端Web开发并继续遇到同样的问题。我正在使用bootstrap样式规则（bootstrap.css）进行一些修改。

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，而其余的jumbotron的不透明度为0.75。问题是按钮的不透明度保持在0.75（因此它与jumbotron背景相同）！有谁知道什么了？我缺少什么基本的东西？我认为id是一个更具体的属性，会覆盖类样式。

Answer 1

不透明度的继承方式与color或background的方式不同。设置元素的不透明度使得该元素及其包含的所有内容都相对于其后面的内容呈现在该不透明度上。然后chile元素的不透明度属性就像@techfoobar所说的那样。您可以阅读更多here。

基本上，您需要做的是分别为opacity的每个孩子设置.jumbotron，同时将opacity的{{1}}保留为1。

Answer 2

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

基本上是Jcubed上面所说的。

Answer 3

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

这当然假设你要使用的css是在你要替换的css之后。在相同的css文件中或者在基本Bootstrap.css之后包含的单独的css文件之后。

如果最糟糕的情况发生，那么你可以使用：

#jnav{
    opacity: 1 !important;
}

但除非你绝对绝望，否则不应该发生这种情况。

Answer 4

他们不会互相覆盖。他们都申请了，但#jnav在.jumbotron内。因此.jumbotron的不透明度将适用于＃jnav的不透明度。

如果您只想要效果，则应使用rgba

示例：

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

最后一个索引是背景的不透明度，它不会与您的字体重叠。

Answer 5

#jnav的不透明度确实为1.但从某种意义上说，相对于其父.jumbotron，其不透明度为0.75。

正如techfoobar所提到的，不透明度与继承的值相混合。因此，#jnav的不透明度实际上将是1 * 0.75。

Here's what MDN has to say：

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

如果您想要实现透明背景而不是内容效果，请查看this question。

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

5 个答案: