css的繼承和層疊

時間 2019-12-08

標籤 css 繼承層疊欄目 CSS 简体版

原文原文鏈接

標籤（空格分隔）： csscss

css稱爲層疊樣式表，CSS有兩大特性：繼承性和層疊性，本章簡單介紹一下繼承性：html

繼承性：

定義：繼承就是給父及設置了一些屬性，子級繼承了父及的該屬性，這就是咱們的css的繼承，有一些屬性能夠繼承，python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繼承性</title>
    <style type="text/css">
        .father{
            color:red;

        }

    </style>
</head>
<body>
<div class="father" id="egon">
    <p>wangwang</p>
</div>

</body>
</html>

問題：背景色是否是繼承？瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繼承性</title>
    <style type="text/css">
        .father{
            color:red;
            font-size: 30px;
            background-color: green;

        }

    </style>
</head>
<body>
<div class="father" id="egon">
    <p>wangwang</p>
</div>

</body>
</html>

經過上述的例子，背景色不屬於繼承，P標籤的標籤是透明的，可是從肉眼看到的是綠色的，他是經過透明提現的，因此background是沒有繼承的；

哪些屬性能夠繼承

color,
font-,
text-,
line-*
像一些盒子元素，定位元素（浮動，絕對，固定定位）不能繼承，你們能夠先了解一下；

層疊性：

這裏先舉個例子，你們猜猜以下的代碼，P標籤是什麼顏色？學習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層疊性</title>
    <style type="text/css">
        #box{
            color:red;

        }
        .container{
            color:yellow;
        }
    </style>
</head>
<body>
    <p id="box" class="container">
        猜猜我是什麼顏色
    </p>

</body>
</html>

結果以下圖：
code

問題：爲何顯示爲紅色呢？代碼不是從上往下執行的嗎？

答案：在css裏面咱們會討論這個問題，在CSS裏面有個權重的概念，誰的權重大，瀏覽器就會顯示誰的屬性；

例如：以下代碼執行：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層疊性</title>
    <style type="text/css">
        #box{
            color:red;

        }
        .container{
            color:yellow;
        }
        p{
            color:purple;
        }
    </style>
</head>
<body>
    <p id="box" class="container">
        猜猜我是什麼顏色
    </p>

</body>
</html>

執行結果：仍是顯示紅色，爲何呢？

那麼如何判斷誰的權重大？很是簡單，就是數數：
1.先數：id的數量；100
2.在數：class數量010
3.標籤：數量001
上述的代碼：中當僅僅顯示id的時候：這時候100咱們只看id的時候，對應的ID是1，對應的類是0，對應的標籤是0
當顯示：類的時候：010，這時候對應的ID是0，對應的類是1，對應的標籤是0
當顯示：標籤的時候：001對應的ID是0，對應的類是0，對應的標籤是1；

比較的方法：
比較id的數量：如上述所述：id第一位是1，就再也不進行後續的比較了；
100----010---001；
如上第一位比較大，就不在進行後續的比較了，若是第一位同樣咱們比較第二位，若是第二位比較大，咱們不在進行比較就是顯示第二位大的那個，若是第一位和第二位都同樣的話，就繼續比較；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層疊性</title>
    <style type="text/css">
        <!--這時候100咱們只看id的時候，對應的ID是1，對應的類是0，對應的標籤是0-->
        #box{
            color:red;

        }
        /*010，這時候對應的ID是0，對應的類是1，對應的標籤是0*/
        .container{
            color:yellow;
        }
        /*001對應的ID是0，對應的類是0，對應的標籤是1*/
        p{
            color:purple;
        }
    </style>
</head>
<body>
    <p id="box" class="container">
        猜猜我是什麼顏色
    </p>
</body>
</html>

例如：blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>權重</title>
    <style type="text/css">
        <!-- id 爲2個0個類1個標籤-->
        #box1 #box2{
            color:yellow;

        }
        /*1 1 1*/
        #box2 .wrap3{
            color:red;
        }
        /*1 0 3*/
        div div #box3 p{
            color:purple;
        }
        /*0 3 4*/
        div.wrap1 div.wrap2 div.wrap3 p{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>我是什麼顏色</p>
            </div>
        </div>
    </div>

</body>
</html>

咱們在比較的時候會先比較id的數量，而後比較類的數量，標籤的數量；權重大的就是有限顯示權重大的；
繼承

權重相同的處理

例如：下邊的代碼，權重同樣的時候，應該怎麼顯示呢？應該顯示後邊的最新的權重；it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>權重</title>
    <style type="text/css">
        /*1 1 1*/
        #box1 .wrap2 p{
            color:red;
        }
        /*1 1 1*/
         #box2 .wrap3 p{
            color:yellow;
        }

    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>我是什麼顏色</p>
            </div>
        </div>
    </div>

</body>
</html>

so:因此上述執行的顏色結果是：黃色；
問題：
經過上述的學習你們看看下邊的例子的網頁應該顯示爲何顏色？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>權重</title>
    <style type="text/css">
        /*2 1 0 */
        #box1 #box2 .wrap3{
            color:red;
        }
        /*1 1 1*/
         #box2 .wrap3 p{
            color:yellow;
        }

    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>我是什麼顏色</p>
            </div>
        </div>
    </div>

</body>
</html>

根據咱們以上的學習你們毫無疑問確定是：紅色；

顏色結果以下：

so:這裏總結：咱們會先看一下標籤有沒有被選中，選中了，就是開始數數(id ,class ,標籤的數量，)誰的權重大就顯示誰的屬性，若是沒有被選中，權重爲0 若是權重都是被繼承下來的權重都是0，「就近原則」這裏就近原則就是說誰描述的近；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。