为什么Chrome开发人员工具中的CSS样式为灰色？

Question

I often use developer tools to test live CSS changes but today I am seeing for the first time that the styles section on a page I'm looking at is greyed out (the background is grey, not the text) and un-editable. 我经常使用开发人员工具来测试实时CSS更改，但今天我第一次看到所查看页面的样式部分显示为灰色（背景为灰色，而非文本）且不可编辑。 I only have the option to revise a specific, singular element's style and not groups of elements. 我只能选择修改特定的单个元素的样式，而不能修改元素组。

What causes this to happen? 是什么原因导致这种情况发生？

Answer 1

Every browser has a predefined set of styles used as an initial base point when rendering a web page. 每个浏览器都有一组预定义的样式，用作呈现网页时的初始基点。 These styles are commonly referred to as User Agent Styles . 这些样式通常称为“ 用户代理样式” 。 In the Chrome Dev tools, these styles are denoted by a gray background. 在Chrome开发工具中，这些样式以灰色背景表示。

SEE IT IN ACTION 实际行动

To see this in action press: 要查看此操作，请按：

F12 to open the Chrome Dev tools on this Stack Overflow page. F12键以在此Stack Overflow页面上打开Chrome Dev工具。
Select the Elements tab in the top of the dev tools. 选择开发工具顶部的Elements标签。
When the HTML markup appears select the <head> tag and look to the right hand column. 当HTML标记出现时，选择<head>标记并查看右侧列。
If not already selected, select the Styles tab in the right hand column. 如果尚未选择，请在右侧栏中选择“ 样式”选项卡。

You should see the following defined styles in that pane: 您应该在该窗格中看到以下定义的样式：

element.style {
}
head {                           user agent stylesheet
    display: none;
}

The styles defined for head are part of the initial user agent stylesheet and denoted by the gray background that you mention above. 为head定义的样式是初始用户代理样式表的一部分，并由您在上面提到的灰色背景表示。

为什么Chrome开发人员工具中的CSS样式为灰色？

问题描述

1 个解决方案

解决方案1
4 2016-10-26 20:29:14

为什么Chrome开发人员工具中的CSS样式为灰色？

问题描述

1 个解决方案

解决方案1 4 2016-10-26 20:29:14

解决方案1
4 2016-10-26 20:29:14