为什么 'color' css 属性的多个条目在 Safari Dev Tools 中处于活动状态？

Question

有时我会看到 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 设置在 body 内的第一个元素上，#playview 是远亲。

Answer 1

无论规则的特殊性如何，CSSOM 中的所有属性都将出现在检查器规则视图中。 "color:#ccffff" 不是 crossed/underline 的事实只是检查器错误。

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

Answer 2

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

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

<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>

为什么 'color' css 属性的多个条目在 Safari Dev Tools 中处于活动状态？

Why are multiple entries of 'color' css attribute active in Safari Dev Tools?

css

safari-web-inspector