CSS 스타일 가중치에 대한 자세한 소개-CSS 튜토리얼-php.cn

CSS 스타일 가중치에 대한 자세한 소개

高洛峰

풀어 주다： 2017-03-04 10:24:48

원래의

1689명이 탐색했습니다.

인라인 스타일>내부 스타일 시트>외부 스타일 시트

예외: 그러나 외부 스타일 시트가 내부에 배치된 경우 아래에 스타일 시트가 인용되어 있으면 외부 스타일 시트 > 내부 스타일 시트

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

2, ID 선택자의 가중치는 100입니다;

3, Class 클래스 선택자의 가중치는 다음과 같습니다. 10;

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

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式权值</title>
    <style>
        body{   
            font-size: 20px;   
            font-weight: 900;    
        }   
        h3{   
            color: yellow;   
        }   
        #redP p{   
            /*权值100+1=101*/   
            color: #f00;   
            /*红色*/   
        }   
        #redP p.red em{   
            /*权值100+1+10+1=112*/   
            color: #00f;   
            /*蓝色*/   
        }   
        #redP .red em{   
            /*权值100+10+1=111*/   
            color: #0ff;   
            /*亮蓝色*/   
        }   


        #redP p span em{   
            /*权值100+1+1+1=103*/   
            color: #ff0;   
            /*黄色*/   
        }   
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>例外:外部样式表>内部样式表</h3>
    <p id="redP">
        <p class="red">
            <span>
                <em>emred</em>
            </span>
        </p>
        <p>red</p>
    </p>
</body>
</html>

로그인 후 복사

위 기사의 개요 CSS 스타일 가중치에 대한 논의는 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

CSS 스타일 가중치에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!