如何从 Inspect Element 获取 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7407523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the CSS style from Inspect Element
提问by Mc-
Is any tool / extension out there that helps me generating the CSS signature or style
是否有任何工具/扩展可以帮助我生成 CSS 签名或样式
For example:
例如：
I see a HTML object and I want to change it, I right click on my Browser ( Chrome, Firefox ) and I choose to inspect the element, there I will be able to modify any css attribute "live". Sometimes it's difficult to know which style signature would correspond to the recent changes.
我看到一个 HTML 对象，我想更改它，我右键单击我的浏览器（Chrome、Firefox）并选择检查该元素，在那里我将能够修改任何 css 属性“live”。有时很难知道哪种样式签名与最近的更改相对应。
element.style {
background: none;
}
My question is if there is any tool that tells you what element.style correct name would be., I think may be multiple results per style though...
我的问题是，是否有任何工具可以告诉您 element.style 的正确名称是什么，但我认为每种样式可能有多个结果......
I'm already using Chrome Firebug like tools. Some elements have no style defined so it appears element.style by default when Inspecting the element. There I can start editing to see how changes would effect.
我已经在使用 Chrome Firebug 之类的工具。有些元素没有定义样式，因此在检查元素时默认显示 element.style。在那里我可以开始编辑以查看更改将如何影响。
What I'm asking for is for some tool to change this default style name: "element.style" to a whole correct path for example: .superior_div_class #the_element_you_want_to_edit
我要的是一些工具来改变这个默认的样式名称：“element.style”到一个完整的正确路径，例如：.superior_div_class #the_element_you_want_to_edit
采纳答案by KP.
In Firebugfor Firefox, you can inspect an element as you describe, and then copy either the XPathor Css Path. This gives you the entire path you need right from htmldown to the specific element.
在FirebugFirefox 中，您可以按照您的描述检查元素，然后复制XPath或Css Path. 这为您提供了从html下到特定元素所需的整个路径。
For example say you are inspecting a link with id myLink. You can copy the Css Path to get something like:
例如，假设您正在检查带有 id 的链接myLink。您可以复制 Css 路径以获得类似的内容：
html body form table.myTable tr td a#myLink
html body form table.myTable tr td a#myLink
回答by Geoff Zoref
In Chrome, in 'inspect element", on the top where "element" and "console" are highlighted, click source and look through the nested files for the element you are looking for. I think as of today HTML files are color-coded white and CSS files are yellow, but that may change.
在 Chrome 中，在“检查元素”中，在“元素”和“控制台”突出显示的顶部，单击源并查看您正在寻找的元素的嵌套文件。我认为截至今天，HTML 文件是彩色编码的白色和 CSS 文件是黄色的，但这可能会改变。
回答by Catfish
If you're using chrome or firefox you can just click in the html and click edit and then give a class or id to the html element and it updates it live.
如果您使用的是 chrome 或 firefox，您只需单击 html 并单击编辑，然后为 html 元素提供一个类或 id，它就会实时更新它。
回答by Andres Ilich
- In Chrome, just hit Ctrl+Shift+Ito bring up the developers tools
- In IE8+hit F12
- In Firefoxinstall the
Firebug extension.
- 在Chrome 中，只需点击Ctrl+ Shift+I即可调出开发人员工具
- 在IE8+ 中点击F12
- 在Firefox 中安装
Firebug extension.
