html - 为什么 id 不覆盖 bootstrap 中的类？

Question

我正在从事前端 Web 开发，并且一直遇到同样的问题。我正在使用经过一些修改的 Bootstrap 样式规则 (bootstrap.css)。

HTML

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

样式.css

#jnav{
    opacity: 1;
}

来自 bootstrap.css

.jumbotron {

opacity: 0.75;


}

基本上，我想使用 ID 来覆盖不透明度，以便按钮的不透明度为 1，而超大屏幕的其余部分的不透明度为 0.75。问题是按钮的不透明度保持在 0.75(所以它与超大屏幕背景一样烦人)!有谁知道怎么回事？我缺少一些基本的东西吗？我认为 id 是一个更具体的属性，会覆盖类样式。

Answer 1

Opacity 的继承方式与 color 或 background 不同。设置元素的不透明度会使该元素及其包含的所有内容相对于其背后的任何内容以该不透明度呈现。智利元素的不透明度属性然后像@techfoobar 说的那样复合。您可以阅读更多 here .

基本上，您需要做的是分别为 .jumbotron 的每个子级设置 opacity，同时保留 的 opacity .jumbotron 在 1.