Maison > Article > interface Web > Une introduction détaillée aux poids de style CSS

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

高洛峰original: 2017-03-04 10:24:481693parcourir

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée aux règles de remplacement de style CSSArticle suivant：Introduction détaillée aux règles de remplacement de style CSS

Articles Liés

Voir plus