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

Une introduction détaillée aux poids de style CSS

高洛峰

Libérer： 2017-03-04 10:24:48

original

1688 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, le poids du sélecteur de classe Class est 10 ;

4, 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 Une brève discussion sur les poids de style CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Pour des articles plus détaillés sur les poids de style CSS, veuillez faire attention au site Web PHP chinois !