단일 요소와 하위에 CSS 정규화/재설정 적용

Question

해당 테마의 스타일을 상속하지 않고 여러 테마에서 작동해야하는 플러그인이 있습니다.

는 나는이

#element, #element * { -- reset css here --} 

을 사용하는 모든 요소를 ​​재설정 할 수 있습니다 알고하지만 그때 나는 모든 스타일을 풀어. 사실 contextual CSS 파일이있는 normalize (http://yuilibrary.com/yui/docs/cssnormalize/)를 사용하는 것이 좋습니다.

하지만이 방법을 단일 div와 모든 하위 항목에 적용하는 방법은 무엇입니까?

또 다른 예시적인 예. 정규화 할 -

나는

<div id="test-element"> 
    <table> 
    <tbody> 
    <tr><td>Test</td></tr> 
    </tbody> 
    </table> 
    </div> 

내가 테이블이 어떤 스타일을 상속하지 싶어합니다.

Answer 1

CSS 파일이있는 경우 가장 쉬운 방법은 컴파일 된 CSS 방식 (예 : less)을 사용하는 것입니다.

당신은 더 적은을 사용하여이 같은 뭔가를 할 수 :

prefixedCssNormalize.less 

#test-element { 
    /* paste contents of the css normalize here. */ 
} 

붙여 넣기 의견이있는 장소에 CSS 파일 (또는 수입이 템플릿 lib 디렉토리를 사용하여).

less 파일을 CSS로 컴파일하면 cssnormalize의 모든 규칙 앞에 #test-element이라는 접두어가 붙습니다. 따라서 당신이 원하는 결과를 내십시오.

Answer 2

다른 파일/스타일이로드 된 후 업데이트되는 스타일이로드되거나 추가되는지 확인하십시오. 스타일이 끝에 적용되면 이전보다 더 많은 가중치가 적용됩니다.

는

#test-element , #test-element * { 
/* your normalize code */ 
} 

으로 특정 요소에 대한 상속 스타일을 중화하고 새/업데이트 된 스타일을 추가합니다.

! important를 사용하거나 상속 된 부모 칠레 링크를 사용하면 새로운 스타일을 표준화하고 적용하는 지루한 작업이됩니다.