2012-05-13 2 views
2

Возможно, какие правила CSS применяются к определенному узлу?Как получить правила CSS, совместимые с узлом?

Пример:

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

И CSS правила:

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

div > strong { color: red; } 

Таким образом, div узел влияют два правила div и .test-node и div:hover если парить только узел. На узел strong влияет div и div:hover правило, так как оно является внутренним div, но свойство color перезаписано вашим собственным правилом div > strong (пример http://jsfiddle.net/yyf9v/).

В принципе мне нужно открытие, как я могу сделать то, что Chrome Inspector делает в javascript. Если вы используете Chrome, перейдите в Inspector (CTRL + Shift + J, Elements и выберите узел). Вы будете se Стили вкладка, которая показывает element.style правило (атрибут style в основном) и Согласованные правила CSS ... Мне это нужно!

+1

«Параметр' strong' узла зависит от '' div' и Див: hover' правило, из-за него является внутренним 'div', но свойство' color' перезаписывается вашим собственным правилом 'div> strong'." Это совершенно неправильно; элемент 'strong' может ** никогда не подвергаться влиянию правила, которое выбирает' div', потому что 'strong' не является' div'! – BoltClock

+0

Посмотрите пожалуйста: http://jsfiddle.net/yyf9v/ –

+0

Это наследование; ваш 'em' не имеет определенных правил цвета, поэтому по умолчанию он наследуется от' div'. Это не означает, что селектора 'div' влияют на' em'. – BoltClock

ответ

0

почему бы вам не попробовать поджигатель на светлячок ... это как инспектор в Google Chrome ...

показывает все классы CSS, применяемые для конкретного узла и что она наследует и что переопределены.

вы можете найти его здесь

http://getfirebug.com/

и здесь

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

+0

Мне нужно сделать это на JS, в частности. Потому что мне нужна эта информация внутри моей страницы. –

Смежные вопросы