-1

有时我会在单个元素上看到两个活动的 CSS 'color' 属性条目，即使其中一个具有 !important。没有 !important 的那个优先，因为它应该（我试图强制元素着色：白色）。看截图：

在此处输入图像描述

谢谢！

更新：添加了 html 标记

<div class="x-button x-button-back x-layout-box-item x-stretched" id="quit-button" style="width: auto !important;">
  <span class="x-badge" style="display: none;"></span>
  <span class="x-button-icon x-hidden" id="ext-element-1109"></span>
  <span class="x-button-label" style="" id="ext-element-1110">Quit</span>
</div>

.peacekeepers-edition 设置在正文中的第一个元素上，#playview 是一个遥远的后代。

4

2 回答 2

1

无论规则的特殊性如何，来自 CSSOM 的所有属性都将显示在检查器规则视图中。“颜色：#ccffff”没有交叉/下划线的事实只是一个检查器错误。

顺便说一句，您的选择器资格过高：.preacekeepers-edition #playview将具有 1|1|0| 的特异性，这比您应该拥有的要多得多。添加 !important 会让事情变得难以管理。

于 2015-04-27T21:03:49.453 回答
1

我正在对您的标记做出一些假设（因为您没有提供任何标记），但我认为可以肯定地说这是您的问题。

假设你的标记是这样的......

<div class="peace-keepers-edition">
    <div id="playview">
        <button class="x-button-back">
            <i class="x-button-icon">icon</i>
        </button>
    </div>
</div>

您的第一个选择器以按钮元素为目标...

.peace-keepers-edition #playview .x-button-back {
    color: #FFF !important;
}

但是您的第二个选择器针对的元素是您的按钮的后代...

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #ccccff;
}

您的!important规则无关紧要，因为您的选择器针对不同的元素。

易于修复；一行一行地添加这一行769...

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #fff;
}

破例... 

body {
    background: #1a1a1a;
}
button {
    padding: 15px;
    font-size: 30px;
    background: green;
}

.peace-keepers-edition #playview .x-button-back {
    color: #FFF !important;
}

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #ccccff;
}
<div class="peace-keepers-edition">
    <div id="playview">
        <button class="x-button-back">
            <i class="x-button-icon">icon</i>
        </button>
    </div>
</div>

工作示例... 

body {
    background: #1a1a1a;
}
button {
    padding: 15px;
    font-size: 30px;
    background: green;
}

.peace-keepers-edition #playview .x-button-back {
    color: #FFF !important;
}

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #fff;
}
<div class="peace-keepers-edition">
    <div id="playview">
        <button class="x-button-back">
            <i class="x-button-icon">icon</i>
        </button>
    </div>
</div>

于 2015-04-27T21:21:41.920 回答