2

It's possible to know what CSS rules is applied to a specific node?

Example:

<div class="test-node">
  <strong>Test</strong>
</div>

And the CSS rules:

div           { color: blue }
div:hover     { color: green; }
.test-node    { font-weight: bold; }

div > strong  { color: red; }

So, the div node is affected by two rules div and .test-node and the div:hover if hover node only. The strong node is affected by div and div:hover rule, because it is inner a div, but the color property is overwrited by your own rule div > strong (example http://jsfiddle.net/yyf9v/).

Basically I need discovery how I can do the samething that Chrome Inspector does in javascript. If you use Chrome, go to Inspector (CTRL + Shift + J, Elements and select a node). You will se a Styles tab, that show element.style rule (attribute style basically) and the Matched CSS Rules... I need this!

4

1 回答 1

0

你为什么不在firefox上试试firebug ......就像谷歌浏览器中的检查员......

它显示了应用于特定节点的所有 CSS 类以及它继承的内容和覆盖的内容。

你可以在这里找到它

http://getfirebug.com/

和这里

https://addons.mozilla.org/en-US/firefox/addon/firebug/

于 2012-05-14T08:54:11.803 回答