How to get the CSS style from Inspect Element

Is any tool / extension out there that helps me generating the CSS signature or style

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.

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...

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.

What I'm asking for is for some too开发者_运维百科l to change this default style name: "element.style" to a whole correct path for example: .superior_div_class #the_element_you_want_to_edit

---

In Firebug for Firefox, you can inspect an element as you describe, and then copy either the XPath or Css Path. This gives you the entire path you need right from html down to the specific element.

For example say you are inspecting a link with id myLink. You can copy the Css Path to get something like:

html body form table.myTable tr td a#myLink

---

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.

---

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.

---

• In Chrome, just hit Ctrl+Shift+I to bring up the developers tools
• In IE8+ hit F12
• In Firefox install the Firebug extension.