Html 为什么id不重写引导中的类？

我正在从事前端web开发，并不断遇到相同的问题。我正在使用bootstrap样式规则（bootstrap.css），但做了一些修改

HTML

来自bootstrap.css

.jumbotron {

opacity: 0.75;


}

---

基本上，我想使用ID来覆盖不透明度，这样按钮的不透明度为1，而jumbotron的其余部分的不透明度为0.75。问题是按钮的不透明度保持在0.75（因此与jumbotron背景相同，令人烦恼）！有人知道怎么回事吗？我有没有遗漏一些基本的东西？我认为id是一个更具体的属性，它会覆盖类样式

Bootstrap.css中使用的选择器通常非常具体。选择器可能类似于

body>div>.jumbotron

，非常具体。在这种情况下，仅使用元素Id不会覆盖css。您需要匹配特定性或更具体。例如，

body>div>#jnav

将有效地覆盖css，因为它们都是同样特定的

当然，这假设您要使用的css在您要替换的css之后。在同一个css文件中，或者在base Bootstrap.css之后包含一个单独的css文件

如果最坏的情况是绝对最坏的，那么您可以使用：

#jnav{
    opacity: 1 !important;
}

---

但是这不应该发生，除非你非常绝望。

不透明度不会像

颜色或
背景那样继承。设置元素的不透明度会使该元素及其包含的所有内容相对于其后面的内容以该不透明度渲染。chile元素的不透明属性然后像@techfoobar所说的那样计算。你可以读更多

基本上，您需要做的是分别为
.jumbotron
的每个子级设置
不透明度
，而将
.jumbotron
的
不透明度
设置为1。
鉴于信息有限，很难说，但听起来您好像在试图在具有不透明度的jumbotron内放置一个按钮（#jnav）。由于jumbotron的不透明度为0.75，因此无论其他规则如何，它内部的所有内容都将遵循相同的不透明度。这不是类/ID特定性或引导的问题，更只是一般样式的细微差别

基本上就是Jcubed刚才所说的。
它们不会相互覆盖。他们都申请了，但jnav在.jumbotron内。因此，jumbotron的不透明度将应用于#jnav的不透明度之上

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

例如：

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

最后一个索引是背景的不透明度，它不会与字体重叠。
\jnav
的不透明度为1。但从某种意义上说，这将是相对于其父级
.jumbotron
，不透明度为
0.75

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

:

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

视图，如果您希望实现透明背景而不是内容效果。
不透明度与继承的值复合。因此，您的
#jnav
将有效地获得
1*0.75
——如果您将其设置为
0.5
，它将获得
0.5*0.75
——有趣的是，您不能给它一个像
2
那样的值，期望它变得完全不透明。在这种情况下，特殊性不是问题。它是从父jumbotron传递的不透明度。让jumbotron的孩子完全不透明的唯一方法是覆盖jumbotron本身的不透明性。很高兴知道…更烦人，但它确实有效
#jnav{
    opacity: 1 !important;
}

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