使用可视样式侧边栏编辑 CSS
对于新手和经验丰富的 Web 开发人员来说，CSS 并非总是最容易处理的。特异性 (Specificity) 和层叠顺序 (cascade order) 可能很复杂，并且要弄清楚页面上每个元素应用了什么样式可能会令人困惑。更糟糕的是，每个属性的作用或其有效值并不总是很清楚。当然，你可以在“样式”(*Styles*) 侧边栏编辑器中输入 display: block，但这又意味着什么呢？你知道 display 的其他有效值是什么吗？这些问题可以通过快速搜索互联网来解决，但这会打断你的工作流程，并且不能真正帮助你理解正在发生的事情。
这就是添加“可视样式”(*Visual Styles*) 侧边栏的主要动机——通过减少开始样式化网页所需的知识量，从而消除 CSS 的困惑。无需你记住所有属性名称和每个属性的值——智能编辑控件预先编程了 150 多个最常见的 CSS 属性及其有效值。你只需找到正确的编辑器，选择一个值，瞧，所选规则就已用新样式更新了。
侧边栏组织
“可视样式”(*Visual Styles*) 侧边栏将支持的 CSS 属性组织成节和子节，以便更轻松地导航侧边栏。节旨在围绕一个共同主题对 CSS 属性进行分组，例如与文本样式、布局或背景相关的属性。
第一个节与其他节略有不同，它列出了所选元素的所有匹配规则。
悬停或双击编辑这些选择器中的任何一个，将高亮显示页面上所有与该选择器匹配的元素。通过单击规则选择器旁边的复选框，可以打开或关闭每个规则。还有各种可用的上下文菜单项，可以使创建新规则变得更加简单。
其余的节都专门用于编辑所选规则的 CSS 属性。每个节都有几个子节，对应于该节主题中的特定区域。这些子节根据其所代表的 CSS 属性的相似性进行分组。然后，这些子节包含最能支持修改这些 CSS 属性值的属性编辑器。
CSS 属性编辑器
在“可视样式”(*Visual Styles*) 侧边栏可用之前，编辑样式只能通过修改规则的 CSS 文本来完成。这需要你记住所需的属性名称、值和语法。自动补全功能有所帮助，但仅在你已了解所需内容时。“可视样式”(*Visual Styles*) 侧边栏没有依赖你的知识，而是提供了多个直观的编辑控件，每个控件都旨在最佳地表示其 CSS 属性。
最常见的编辑器是关键字弹出按钮，它在弹出菜单中包含一个关键字值列表。当关键字文本呈灰色时，表示计算属性值，并且当前规则未设置显式值。当文本为黑色时，表示当前规则已为该属性设置了显式值。
默认情况下，弹出按钮将包含属性最常用的值。要访问完整的取值列表，请按住 Option 键并单击弹出按钮。如果已使用了不常见的值，则所有值将默认显示在弹出菜单中。
对于值数量较少的属性，使用带有熟悉图标的分段按钮。当某个段落被描边时，表示计算属性值，并且当前规则未设置显式值。当某个段落具有实体选择时，表示当前规则已为该属性设置了显式值。
最后一个常见的编辑器是基于数字的值编辑器。此编辑器是独一无二的，因为其属性可以同时具有关键字值和数值，通常带有相应的单位。与弹出按钮编辑器类似，按住 Option 键并单击菜单箭头可查看不常见值和单位的完整列表。
还有一些特殊编辑器提供更简单、更具体的方式来更改其各自的属性值——例如颜色、渐变、贝塞尔曲线、列表和范围。
发现 CSS
将“可视样式”(*Visual Styles*) 侧边栏添加到 Web Inspector 的目的之一是为设计师和开发人员提供一种不同的网页设计方法。学习 CSS 可能是一个艰难而漫长的过程。一个组织 CSS“词汇”的系统使任何人都可以以有趣和友好的方式学习和开发网页样式。一个例子是，具有依赖关系的属性旁边会出现警告图标。
初次接触 CSS 的开发人员可能不知道当 position 属性设置为 static 时，top 属性将不起作用。在这种情况下（以及许多其他情况下），“可视样式”(*Visual Styles*) 侧边栏会在编辑器旁边显示一个警告图标，当鼠标悬停时，会解释为了使此属性生效，其他属性需要哪些值。
演练场
在此演练场中尝试“可视样式”(*Visual Styles*) 侧边栏。页面上列出了五项简单的更改，它们将让你对“可视样式”(*Visual Styles*) 侧边栏的优势有一个全面的了解。
反馈
“可视样式”(*Visual Styles*) 侧边栏在OS X El Capitan 10.11.4 beta 和 WebKit Nightly 版本中可用。你希望在“样式”(*Styles*) 侧边栏中添加某个功能，或者你在使用的某个属性在“可视样式”(*Visual Styles*) 侧边栏中缺失吗？告诉我们吧！请随时在 Twitter（@dcrousso 或 @jonathandavis）上或通过提交 Bug 向我们发送反馈。