A detailed introduction to CSS style weights-CSS Tutorial-php.cn

A detailed introduction to CSS style weights

高洛峰

Release： 2017-03-04 10:24:48

Original

1689 people have browsed it

InLine style(InLine style)>Internal style sheet(Internal style sheet)>External style sheet(External style sheet)

Exception: But if the external style sheet is placed inside The style sheet is quoted below, then the external style sheet > internal style sheet;

1, the weight of the inline style sheet is 1000;

2, the weight of the ID selector is 100;

3, The weight of the Class class selector is 10;

4, The weight of the HTML tag selector is 1;

The specific code is as follows:

<!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>

Copy after login

The above article's brief discussion on CSS style weights is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more detailed articles related to CSS style weights, please pay attention to the PHP Chinese website!