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

Question

我经常使用开发人员工具来测试实时CSS更改，但今天我第一次看到所查看页面的样式部分显示为灰色（背景为灰色，而非文本）且不可编辑。 我只能选择修改特定的单个元素的样式，而不能修改元素组。

是什么原因导致这种情况发生？

Answer 1

每个浏览器都有一组预定义的样式，用作呈现网页时的初始基点。 这些样式通常称为“ 用户代理样式” 。 在Chrome开发工具中，这些样式以灰色背景表示。

实际行动

要查看此操作，请按：

您应该在该窗格中看到以下定义的样式：

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

为head定义的样式是初始用户代理样式表的一部分，并由您在上面提到的灰色背景表示。