如何从 Inspect Element 获取 CSS 样式答案

【问题标题】：How to get the CSS style from Inspect Element如何从 Inspect Element 获取 CSS 样式
【发布时间】：2011-09-13 19:42:13
【问题描述】：

是否有任何工具/扩展可以帮助我生成 CSS 签名或样式

例如：

我看到一个 HTML 对象并且我想更改它，我右键单击我的浏览器（Chrome、Firefox）并选择检查元素，在那里我将能够修改任何 CSS 属性“live”。有时很难知道哪种样式签名与最近的更改相对应。

element.style {
background: none;
}

我的问题是，是否有任何工具可以告诉您 element.style 正确名称是什么。但我认为每种样式可能有多个结果...

我已经在使用类似 Chrome Firebug 的工具了。有些元素没有定义样式，因此在检查元素时默认显示为 element.style。在那里我可以开始编辑以查看更改的效果。

我要的是一些工具来更改这个默认样式名称：“element.style”到一个完整的正确路径，例如：.superior_div_class #the_element_you_want_to_edit

【问题讨论】：

标签： css styles

【解决方案1】：

在 Firefox 的 Firebug 中，您可以按照您的描述检查元素，然后复制 XPath 或 Css Path。这为您提供了从 html 到特定元素所需的整个路径。

例如，假设您正在检查 ID 为 myLink 的链接。您可以复制 Css 路径以获得如下内容：

html body form table.myTable tr td a#myLink

【讨论】：

谢谢@KP。这究竟是。但是我认为路径太大了，有没有机会将它缩短到最小值？
您必须手动编辑复制的结果。您可以通过删除中间的一些元素来轻松缩短它。例如，如果完整路径是 html body form table.myTable tr td a#myLink，您可以将其修剪为 table.myTable a#myLink。这真的取决于你。删除的越多，选择性就越低。

【解决方案2】：

如果您使用的是 chrome 或 firefox，您只需单击 html 并单击编辑，然后为 html 元素提供一个类或 id，它会实时更新它。

【讨论】：

【解决方案3】：

在 Chrome 中，在“检查元素”中，在“元素”和“控制台”突出显示的顶部，单击源并查看您要查找的元素的嵌套文件。我认为截至今天 HTML 文件是颜色编码的白色和 CSS 文件是黄色的，但这可能会改变。

【讨论】：

【解决方案4】：

【讨论】：