CSS 규칙을 노드와 호환되게하려면 어떻게해야합니까?

특정 노드에 적용되는 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 및 div:hover 규칙이 적용되지만 color 속성은 자신의 규칙 div > strong (예 http://jsfiddle.net/yyf9v/)에 의해 overwrited된다.

기본적으로 나는 무엇을 할 수있는 발견이 필요합니다 Chrome Inspector는 javascript에서 제공됩니다. Chrome을 사용하는 경우 관리자 (Ctrl + Shift + J, 요소)로 이동하여 노드를 선택하십시오. 스타일 탭, 즉 element.style 규칙 (속성 style 기본적으로)과 일치하는 CSS 규칙 ...이 필요합니다.

출처

2012-05-13 David Rodrigues

http://getfirebug.com/

과를 찾을 수는 "'strong' 노드는'DIV div''에 의해 영향을하고있다 : hover' 규칙을 그것 때문에 'div' 내부에 있지만'color' 속성은 자신의 규칙'div> strong'에 의해 overwrited됩니다. " 이것은 완전히 잘못되었습니다. 강한 요소는'div'를 선택하는 규칙에 영향을받지 않습니다. 왜냐하면'strong'는'div'가 아니기 때문입니다! – BoltClock

제발 좀보세요 : http://jsfiddle.net/yyf9v/ –

그건 상속이다; 당신의'em'은 정의 된'color' 규칙이 없기 때문에 기본값은'div'에서 상속받는 것입니다. 'div' 셀렉터가'em'에 영향을주는 것은 아닙니다. – BoltClock

는 왜 특정 노드에 적용된 모든 CSS 클래스를 보여주고 무엇을 상속 않고 무엇을하는 것은 오버라이드 (override)되어

... 당신이 구글 크롬의 관리자처럼 ... 파이어 폭스에 불을 지르고 시도니까.

여기 여기

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

출처

2012-05-14 08:54:11 iosMentalist

나는 JS에서 그것을 구체적으로 할 필요가있다. 내 페이지 안에이 정보가 필요하기 때문에. –

CSS 규칙을 노드와 호환되게하려면 어떻게해야합니까?

답변

관련 문제