CSS 우선순위 메커니즘

스타일 우선순위

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

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

(외부 스타일) 외부 스타일 시트 < (내부 스타일) 내부 스타일 시트 < (인라인 스타일) 인라인 스타일

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

예시는 다음과 같습니다.

선택자 우선순위

설명:

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

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

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

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

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

CSS 우선순위 규칙:

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

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

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

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

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

    

测试！

    

       

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 中，

   虽然代码是将