Question

我是这个CSS片段

.modal-header {
  background-color: #2c3e50;
  color: #ffffff;
}
.modal-header BUTTON.close {
  color: #ffffff;
  opacity: 100%;
}
.modal-header BUTTON.close SPAN {
  color: #ffffff;
  opacity: 100%;
}

我认为在应用样式时firefox将遵循如此具体的规则，但是遵循与.modal-header相关的第一行，而忽略其他两个规则（仅限于此处强制显示SPAN）在白色）

当我打开页面时，在这种情况下会应用另一个选择器，更通用（.close）并在文件中位于我的前面，因此跨度中的文本将以不同的颜色显示。

我使用LESS生成此CSS，并在生成的CSS中将代码复制。但是如果我使用Firebug CSS面板打开CSS，我就看不到规则2和3，只有一个。

当然，他们都是有效的CSS，那么，问题是什么？

请注意，IE 11正在呈现白色，但它不适用我的opacity: 100%;设置

编辑：我试图将案件改为小写，但没有任何改变。

编辑2：将不透明度更改为1使整个规则应用并匹配thans！

Answer 1

正如已经指出的，不透明度需要介于0和1之间的值。您需要的是：

.modal-header {
  background-color: #2c3e50;
  color: #ffffff;
}
.modal-header BUTTON.close {
  color: #ffffff;
  opacity: 1;
}
.modal-header BUTTON.close SPAN {
  color: #ffffff;
  opacity: 1;
}

你可能对好的ol＆＃39; IE的filter-property，你可以在其中写：

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* IE 5-7 */
filter: alpha(opacity=100);

请注意，此非标准filter属性已被弃用，并且不与最近引入的CSS3属性filter相同。

Firefox忽略CSS规则

1 个答案: