我经常使用开发人员工具来测试实时 CSS 更改，但今天我第一次看到我正在查看的页面上的样式部分是灰色的(背景是灰色的，而不是文本)并且不 -可编辑。我只能选择修改特定的单一元素的样式，而不是元素组。
什么原因导致这种情况发生？
最佳答案
每个浏览器都有一组预定义的样式，用作渲染网页时的初始基点。这些样式通常称为“用户代理样式”。在 Chrome 开发工具中，这些样式由灰色背景表示。
查看实际操作
要查看实际效果，请按:
- F12 可在此 Stack Overflow 页面上打开 Chrome 开发工具。
- 选择开发工具顶部的元素选项卡。
- 当 HTML 标记出现时，选择
<head>标记并查看右侧栏。 - 如果尚未选择，请选择右侧栏中的样式选项卡。
您应该在该 Pane 中看到以下定义的样式:
element.style {
}
head { user agent stylesheet
display: none;
}
为 head 定义的样式是初始用户代理样式表的一部分，并由您上面提到的灰色背景表示。
关于html - 为什么 CSS 样式在 Chrome 开发者工具中显示为灰色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40271537/