Home > Article > Web Front-end > Detailed introduction to CSS style weights

Detailed introduction to CSS style weights

高洛峰Original: 2017-03-28 10:34:501532browse

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 Class class The weight of the selector is 10;
4, and 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>

The above is the detailed content of Detailed introduction to CSS style weights. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to using CSS3 to enhance style effectsNext article：Detailed introduction to using CSS3 to enhance style effects

See more

Detailed introduction to CSS style weights

Related articles