如何从Inspect Element获取CSS样式

Question

是否有任何工具/扩展可以帮助我生成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

Answer 1

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

例如，假设您正在检查标识为myLink的链接。您可以复制Css路径以获得类似：

html body form table.myTable tr td a#myLink

Answer 2

如果您正在使用chrome或firefox，只需单击html并单击编辑，然后为html元素提供类或ID，它会立即更新。

Answer 3

在Chrome的“检查元素”中，突出显示“元素”和“控制台”的顶部，单击源，并在嵌套文件中查找您要寻找的元素。颜色编码的白色和CSS文件为黄色，但是可能会更改。

Answer 4

• 在 Chrome 中，只需按 Ctrl + Shift + I 即可显示开发人员工具
• 在 IE8 + 点击 F12
• 在 Firefox 中安装Firebug extension。