Introduction détaillée aux poids de style CSS-tutoriel CSS-php.cn

Introduction détaillée aux poids de style CSS

高洛峰

Libérer： 2017-03-28 10:34:50

original

1494 Les gens l'ont consulté

Style InLine>Feuille de style interne>Feuille de style externe
Exception : Mais si la feuille de style externe est placée à l'intérieur La feuille de style est citée ci-dessous, alors feuille de style externe > feuille de style interne 1, le poids de la feuille de style en ligne est de 1000 ;
2, le poids du sélecteur d'ID est de 100
3, Class class Le poids du sélecteur est de 10 ; le poids du sélecteur de balise HTML est de 1 ;

Le code spécifique est le suivant :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!