首頁 > 文章 > web前端 > 詳細介紹CSS樣式權值

詳細介紹CSS樣式權值

高洛峰原創: 2017-03-04 10:24:481655瀏覽

內嵌樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet)

例外：但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表;

1,內嵌樣式表權值為1000;

2,ID選擇器的權值為100;

3,Class類別選擇器的權值為10;

4,HTML標籤選擇器的權值為1;

具體程式碼如下：

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

以上這篇淺談CSS樣式權值就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多詳細介紹CSS樣式權值相關文章請關注PHP中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS樣式覆蓋規則的詳細介紹下一篇：CSS樣式覆蓋規則的詳細介紹

看更多