Chrome开发者工具样式选项卡显示褪色的CSS定义，为什么？

Question

我已经使用Chrome很长一段时间了，我从来没有（我不记得）在样式面板中遇到褪色的CSS定义。选择器尚未在其他位置定义。

示例：

（编辑：要清楚，我不是指用户代理样式表）

我无法弄清楚为什么它会褪色，这意味着什么。该定义似乎是可编辑的，但对值的任何更改都不会持续存在（即，一旦我单击它，它将恢复为原始值）并且对网页没有影响。

我在documentation工具中找不到对此的任何引用。你们中的任何一个人都可以对此有所了解吗？

Answer 1

“褪色”样式是未应用于所选标记的样式。因此，在您的屏幕截图中，您有一个h1规则，该规则是正常颜色的 - 一个适用于您选择的任何元素 - 并且您有.SubHeader h1规则不被应用于所选元素。

您有时会看到这是您动态添加CSS规则（Chrome开发工具中的+按钮），但修改选择器以使其不适用于您选择的任何元素。

Answer 2

这意味着该规则已被继承：

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

Answer 3

这些是浏览器自动应用的样式表。

您可以通过说明来查看：user agent stylesheets。

您可以通过选中Show user agent styles在右下角的设置中禁用此功能。现在样式将不会显示在CSS面板中（但仍在应用！）

编辑：

我误解了你的问题，开发人员说了以下关于暗淡规则的内容：

  

注意：如果编辑选择器使其与所选元素不匹配，则规则将变暗，显然，不会应用于元素。你应该很少需要这样做。

您的屏幕截图看起来可能就是这种情况。

Answer 4

淡化的规则不适用于该元素。

Take a look at this example

margin

如果您打开开发工具，您会注意到float和color已褪色，stroke和span不是。这是因为color元素从其父级继承了样式规则，但只有stroke和<android.support.v7.widget.AppCompatTextView android:id="@+id/textview_unit_title" android:layout_width="@dimen/tile_image_size" android:layout_height="wrap_content" android:maxLines="2" android:textSize="@dimen/medium_size" android:textColor="@color/color_text" android:paddingTop="@dimen/padding_title" android:layout_marginRight="2dp" android:layout_marginEnd="2dp" app:autoSizeMaxTextSize="@dimen/style_medium" app:autoSizeTextType="uniform" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toRightOf="@id/imageview_unit_icon" app:layout_constraintTop_toTopOf="parent"/> rules are inheritable。