CSS 우선순위 메커니즘

스타일 우선순위

다중 스타일: 동일한 요소에 외부 스타일, 내부 스타일, 인라인 스타일을 동시에 적용하는 경우 다중 스타일인 경우입니다.

일반적으로 우선순위는 다음과 같습니다.

(외부 스타일) 외부 스타일 시트

예외가 있습니다. 즉, 외부 스타일이 내부 스타일 뒤에 배치되면 외부 스타일이 내부 스타일보다 우선 적용됩니다.

예시는 다음과 같습니다.

      /* 内部样式 */

      h3{color:green;}

    

测试！

선택자 우선순위

설명:

1 인라인 스타일 시트의 최대 가중치는 1000입니다.

2. 클래스 클래스 선택기의 가중치는 10입니다.

4. HTML 태그 선택기의 가중치는 1입니다.

계산 및 비교에는 선택기의 가중치를 사용합니다. 예는 다음과 같습니다.

결과: 태그 내의 데이터가 파란색으로 표시됩니다.

CSS 우선순위 규칙:

A 선택자에는 가중치가 있으며, 가중치가 클수록 우선순위가 높습니다.

B 가중치가 같을 때 우선순위는 다음과 같습니다. 나중에 나타나는 스타일 시트 설정이 먼저 나타나는 스타일 시트 설정보다 좋습니다.

C 작성자의 규칙은 브라우저의 규칙보다 높습니다. 즉, 웹 페이지 작성자가 설정한 CSS 스타일이 더 높습니다.

D 상속된 CSS 스타일이 나중에 지정된 CSS 스타일만큼 좋지 않습니다.

E 동일한 속성 설정 세트에서 "!important"로 표시된 규칙이 가장 높습니다. 예는 다음과 같습니다.

     #redP p{

        /*两个color属性在同一组*/

        color:#00f !important; /* 优先级最大 */

        color:#f00;

     }

    

       

color

       

color

결과: Firefox에서는 파란색으로 표시되고 IE 6에서는 빨간색으로 표시됩니다.

스크립트를 사용하여 스타일 추가

외부 스타일을 선택한 다음 JavaScript 스크립트를 사용하여 내부 스타일을 삽입하면(즉, 내부 스타일이 스크립트를 사용하여 생성됨) IE 브라우저는 고유성을 보여줍니다. 코드는 다음과 같습니다.

  

  

在IE中我是绿色，非IE浏览器下我是蓝色！

결과: Firefox/Chrome/Safari/Opera에서는 텍스트가 파란색입니다. IE 브라우저에서는 텍스트가 녹색입니다.

JavaScript 코드를 추가하여 IE에 스타일 콘텐츠를 추가합니다.

var s=document.createElement("style");

var head=document.getElementsByTagName("head").item(0);

var link=document.getElementsByTagName("link").item(0);

head.insertBefore(s,link);

/* 注意：在IE 中，

   虽然代码是将

   但实际内存中，

   这也是“IE中奇怪的应用CSS的BUG”之所在！

*/

var oStyleSheet = document.styleSheets[0];

//这实际是在的外部样式中追加

oStyleSheet.addRule("h3","color:green;");

alert(oStyleSheet.rules[0].style.cssText);

alert(document.styleSheets[0].rules[0].style.cssText);

//方式2

var cssStr="h3 {color:green;}";

document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

IE 브라우저 다운로드 또는 렌더링 순서는 다음과 같습니다.

● IE 다운로드 순서는 위에서 아래입니다.

● JavaScript 기능 실행이 차단됩니다. IE 다운로드 ;

● IE 렌더링 순서도 위에서 아래로

● IE 다운로드와 렌더링이 동시에 수행됩니다.

● 페이지의 특정 부분, 위의 모든 부분이 다운로드되었습니다. (단, 관련 요소가 모두 다운로드되었다는 의미는 아닙니다.)

● 다운로드 과정에서 태그가 발견되고 파일이 임베디드 의미적으로 해석 가능합니다(예: JS 스크립트, CSS 스타일). 그러면 IE의 다운로드 프로세스는 이때 다운로드를 위해 별도의 연결을 활성화합니다. 그리고 다운로드 후 파싱됩니다. JS나 CSS에서 재정의된 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.

● 구문 분석 중에는 페이지의 모든 하위 요소 다운로드를 중지하세요. 스타일 시트 파일은 특별합니다. 다운로드한 후에는 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료된 후 이전의 모든 요소(이전에 렌더링된 요소 포함)가 다시 렌더링됩니다. 그리고 전체 페이지가 렌더링될 때까지 이런 방식으로 계속 렌더링합니다.

● Firefox가 다운로드 및 렌더링을 처리하는 순서는 iframe 렌더링과 같은 일부 미묘한 차이점을 제외하면 거의 동일합니다.

CSS 우선순위 메커니즘과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!