찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 스타일 우선순위 규칙

CSS 스타일 우선순위 규칙

王林
王林앞으로
2021-01-30 10:31:184275검색

CSS 스타일 우선순위 규칙

CSS 스타일 우선순위 소개:

같은 요소에 외부 스타일, 내부 스타일, 인라인 스타일을 동시에 적용할 경우 우선순위는 다음과 같습니다.

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

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

예는 다음과 같습니다. 

<head>    
    <style type="text/css">    
      /* 内部样式 */    
      h3{color:green;}    
    </style>    
    <!-- 外部样式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 设置：h3{color:blue;} -->    
</head>    
<body>    
    <h3>测试！</h3>    
</body>

선택기 우선순위

CSS 스타일 우선순위 규칙

설명:

1 인라인 스타일 시트의 무게는 최대 1000입니다.

2.

3. 클래스 클래스 선택기의 가중치는 10

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

선택기의 가중치를 사용하여 계산하고 비교합니다. 

<html>    
  <head>    
    <style type="text/css">    
        #redP p {    
             /* 权值 = 100+1=101 */    
             color:#F00;  /* 红色 */    
        }    
        #redP .red em {    
             /* 权值 = 100+10+1=111 */    
             color:#00F; /* 蓝色 */    
        }    
        #redP p span em {    
             /* 权值 = 100+1+1+1=103 */    
             color:#FF0;/*黄色*/    
        }    
    </style>    
  </head>    
  <body>    
     <div id="redP">    
        <p class="red">red    
           <span><em>em red</em></span>    
        </p>    
        <p>red</p>    
     </div>    
  </body>    
</html>

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

CSS 우선순위 규칙:

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

B 가중치가 동일하면 나중에 나타나는 스타일 시트 설정이 먼저 나타나는 스타일 시트 설정보다 좋습니다.

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

D 상속된 CSS 스타일은 다음과 같습니다. 나중에 지정된 CSS 스타일이 좋습니다.

E 그룹 속성 설정에서 "!important"로 표시된 동일한 규칙은 다음과 같습니다. 예는 다음과 같습니다.

(학습 동영상 공유:

css 동영상 튜토리얼) 

<html>    
  <head>    
    <style type="text/css">    
     #redP p{    
        /*两个color属性在同一组*/    
        color:#00f !important; /* 优先级最大 */    
        color:#f00;    
     }    
    </style>    
  </head>    
  <body>    
     <div id="redP">    
       <p>color</p>    
       <p>color</p>    
     </div>    
  </body>
</html>

결과: Firefox에서는 파란색으로 표시됨, IE 6 Red에서는 표시됨

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

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

<html>    
<head>    
  <title> demo </title>    
  <meta name="Author" content="xugang" />    
  <!-- 添加外部CSS 样式 -->    
  <link rel="stylesheet" href="styles.css" type="text/css" />    
  <!-- 在外部的styles.css文件中，代码如下：    
       h3 {color:blue;}    
  -->    
  <!-- 使用javascript 创建内部CSS 样式 -->    
  <script type="text/javascript">    
  <!--    
    (function(){    
        var agent = window.navigator.userAgent.toLowerCase();    
        var is_op = (agent.indexOf("opera") != -1);    
        var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;    
        var is_ch = (agent.indexOf("chrome") != -1);    
        var cssStr="h3 {color:green;}";    
        var s=document.createElement("style");    
        var head=document.getElementsByTagName("head").item(0);    
        var link=document.getElementsByTagName("link");    
        link=link.item(0);    
        if(is_ie)    
        {    
            if(link)    
                head.insertBefore(s,link);    
            else    
                head.appendChild(s);    
            document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;    
        }    
        else if(is_ch)    
        {    
            var t=document.createTextNode();    
            t.nodeValue=cssStr;    
            s.appendChild(t);    
            head.insertBefore(s,link);    
        }    
        else    
        {    
            s.innerHTML=cssStr;    
            head.insertBefore(s,link);    
        }    
    })();    
  //-->    
  </script>    
</head>    
<body>    
  <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3>    
</body>    
</html>

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

추가

IE에 스타일 콘텐츠를 추가하는 JavaScript 코드: 

var s=document.createElement("style");    
var head=document.getElementsByTagName("head").item(0);    
var link=document.getElementsByTagName("link").item(0);    
head.insertBefore(s,link);    
/* 注意：在IE 中，    
   虽然代码是将<style>插入在<link>之前，    
   但实际内存中，<style>却在<link>之后。    
   这也是“IE中奇怪的应用CSS的BUG”之所在！    
*/    
var oStyleSheet = document.styleSheets[0];    
//这实际是在<link>的外部样式中追加    
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 튜토리얼

위 내용은 CSS 스타일 우선순위 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS 마우스 스타일다음 기사：CSS 마우스 스타일

관련 기사

더보기