Gepiu的博客

有点想法很好,有点行动更好

树欲动...


Chrome开发者工具 - Elements(元素面板) ①

编辑样式

使用Styles(样式)窗格修改与元素关联的CSS样式。

Styles pane

TL;DR

  • Styles (样式)窗格允许您以尽可能多的方式更改本地CSS,包括编辑现有样式,添加新样式,添加样式规则。
  • 如果你想要样式持久(他们页面重新加载而丢失),您需要将它们持久化到您的开发工作区。

检查应用到元素的样式

选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示:

  • 在顶部是 element.style 。这些是使用style属性直接应用于元素的样式(例如, < p style="color:green" > )(注:内联样式),或是你在DevTools该区域编辑应用的。
  • 下面是与元素匹配的所有CSS规则。例如,在下面的屏幕截图中,所选元素接收 line-height:24px 的规则,定义在 tools.css 中。
  • 下面是继承的样式,包括匹配所选元素的祖先元素所有可继承的样式规则。 例如,在下面的屏幕截图中,所选元素继承了来自 user agent stylesheet 中的 display:list-item 规则。

请查看下面图片上,与下面编号相对应的条目。

Annotated Styles pane

  1. 与匹配元素的选择器关联的样式。
  2. User agent stylesheets 有明确的标记,并且经常被您的网页上的CSS覆盖。
  3. 通过层叠规则被覆盖的CSS规则,使用删除线文本显示。
  4. Inherited (继承)的样式显示在 Inherited from < NODE > 分组下。 单击分组标题栏中的DOM节点,会导航到该节点在DOM树视图中的位置。 ( CSS 2.1 属性表 显示了哪些属性是可以被继承的。)
  5. 灰色条目是未定义的规则, 在运行时被计算样式取代了 (注:可以理解为无效的样式规则)。

了解层叠和继承的工作原理对于调试样式至关重要。层叠涉及如何给CSS声明赋予权重,当样式重叠时,以确定哪些规则优先于另一规则。继承涉及HTML元素如何从包含该元素的元素(祖先元素)中继承CSS属性。 有关更多信息,请参阅W3C关于级联的文档

查看选择器应用的元素

将鼠标悬停在Styles(样式)窗格中的CSS选择器上,可以查看应用该选择器的所有元素。 例如,在下面的屏幕截图中,鼠标悬停在选择器.wf-tools-guide__section-link a上。 在实际网页中,您可以看到所有应用该选择器的<a>元素。

viewing elements affected by selector

注意:
此功能仅突显在可视窗口中的元素;可视窗口外的其他元素也可能会受到该选择器的影响。

添加, 启用, 和禁用 CSS 类

点击.cls按钮查看与当前选定元素相关联的所有CSS类。从那里,你可以:

  • 启用或禁用当前与元素相关联的类。
  • 向元素添加新的类。

classes pane

编辑现有的属性名称或值

单击一个CSS属性名称或值就可以进行编辑。当突出显示名称或值的时候,按Tab键向前移动到下一个属性,名称或选择器。按住Shift键,然后按Tab键向后移动。

当编辑数字的CSS属性值时,使用以下键盘快捷键进行递增和递减:

  • Up 和 Down 键,属性值将递增和递减 1 ,或者,如果当前属性的值在 -11 之间,那么将递增和递减 .1
  • Alt + Up 和 Alt + Down ,值将递增和递减 0.1
  • Shift + Up 递增 10 , Shift + Down 递减 10
  • Shift + Page Up (Windows,Linux)或 Shift + Function + Up (Mac)将值递增 100 。 Shift + Page Down (Windows,Linux)或 Shift + Function + Down (Mac)将值递减 100
  • 注:当然你可以使用鼠标滚了,来递增或递减值。

添加一个新的属性声明

单击可编辑的CSS规则中的空白区域,可以创建新的属性声明。输入,或将CSS粘贴到Styles(样式)窗格中。属性及其值将被解析并输入到正确的元素CSS规则中,并且在页面中实时展现。

注意:要启用或禁用样式声明,请勾选或取消勾选其旁边的复选框。

添加一个样式规则

单击New Style Rule(new style rule button)按钮可以添加一个新的规则。

点击并按住这个按钮可以选择将新的规则添加到哪个样式表文件。

添加或删除动态样式(伪类)

您可以在元素上手动设置动态的伪类选择器(例如:active,:focus,:hover, 和:visited) 。

有两种方法可以在元素上设置这些动态状态:

  • 右键单击 Elements (元素)面板中的元素,然后从菜单中选择目标伪类以启用或禁用它。 right-click on element to enable pseudoclass selector
  • Elements (元素)面板中选择一个元素, 点击 Styles (样式)窗格中的 :hov ( hover pseudo button )按钮, 并使用复选框来启用或者禁用当前所选元素的选择器. :hov pane

添加背景颜色或颜色到一个样式规则

Styles(样式)窗格提供了向一个样式规则中添加颜色和背景颜色声明的快捷方式。

在样式规则的右下角,有一个三点的图标。你需要将鼠标悬停在样式规则上才能看到它。

three-dots icon in rule set

将鼠标悬停在该图标上,会显示添加一个color(颜色)声明(add color declaration)或一个background-color(背景颜色)(add background-color declaration)的按钮。单击其中一个按钮,将声明添加到样式规则。