자바 스크립트로 .css 우선 순위를 변경하는 방법

Question

자바 스크립트를 사용하여로드 된 .css 파일의 우선 순위를 변경해야합니다. 나는 head 요소에 < 링크 rel = "stylesheet"....> 태그의 위치를 ​​바꿈으로써 이것을 할 수 있음을 발견했다. 이 솔루션은 IE를 제외한 모든 브라우저에서 정상적으로 작동합니다. 나는이에 대해 다음 코드를 사용하고 있습니다 :

var firstCss = styleSheets[0].ownerNode; 
var defaultCss = styleSheets[1].ownerNode; 
firstCss.parentNode.insertBefore(defaultCss, firstCss); 

그래서 같은 문제, 아니면 누군가가 IE에서이 코드가 작동을 만드는 방법을 알고에 대한 더 나은 솔루션이있다.

Answer 1

나는이 문제를 최선의 방법으로 해결하지 못할 수도 있지만 작동한다. 나는 다음과 같은 코드를 작성했다.

if (document.createStyleSheet) { 
    document.createStyleSheet(defaultCss.href,0); 
    defaultCss.cssText = ""; 
} else { 
    firstCss.ownerNode.parentNode.insertBefore(defaultCss.ownerNode, firstCss.ownerNode); 
} 

나는 "defaultCss.cssText =" ";"를 사용한다. 오래된 CSS 파일을 정리하려면 IE7-8에서 styleSheet의 ownerNode를 얻을 수 없지만 (IE9에서 할 수 있음) 이전 스타일 시트를 삭제하십시오. 따라서 CSS 파일을 첫 번째 위치에로드하더라도 마지막 위치에서 여전히 동일한 위치를 유지하게되며 우선 순위가 정해집니다. IE 7-9 및 다른 borwsers에서 작동하는지 확인하고 스타일 시트가 서버에서 다시로드되지 않도록합니다. IE는 캐시에서 가져옵니다. 누군가에게 유용 할 수 있기를 바랍니다.

Answer 2

CSS 파일을로드하는 순서는 스타일 적용 방법에 거의 영향을 미치지 않습니다. 특정 요소에 적용되는 스타일은 CSS 규칙에 사용 된 선택기의 특수성에 따라 결정됩니다. 더 낮은 특이성은 더 낮은 특이성을 가진 작풍이 나중에 선언 되더라도, 더 낮은 특이성을 위압한다.

특이성은 (a, b, c, d) 형태의 4 자리 숫자의 조합으로 볼 수 있습니다. 여기서 a는 b와 b보다 우선하며 c와 c는 d보다 우선합니다. 따라서 (0,0,0,2)는 (0,0,0,1)보다 높은 특이성을 가지고 (0,0,1,0)은 (0,0,0,2)보다 높은 특이성을 갖는다.

스타일 선언 순서 (즉, 스타일 시트가로드되는 순서)는 선택기가 정확하게 동일한 특수성을 사용하는 경우에만 중요합니다. 예

:

A: h1 
B: #content h1 
C: <div id="content"> 
<h1 style="color: #fff">Headline</h1> 
</div> 

(A)의 특성은 (하나 개의 원소), B의 특이성은 0,1,0,1 (ID 하나의 기준점이다 0,0,0,1이다

요소) 인 경우 C의 구체화 값은 인라인 스타일이므로 1,0,0,0입니다. 0001 = 1 < 0101 = 101 < 1000, 이후 세 번째 규칙은 더 높은 특이성 수준을 가지므로 적용됩니다. 세 번째 규칙이 없으면 두 번째 규칙이 적용되었을 것입니다.