CSS 三大特性： 層疊性、繼承性、優先順序

層疊性：同一個選擇器設定相同的樣式，此時就會發生樣層疊，即樣式覆蓋。相同的樣式後執行的樣式起作用（樣式程式碼行數大的起作用）

        div {
            color: red;
            color: blue;
        }

    <div>
        我顯示的字型顏色是藍色
    </div>

繼承性： 子標籤會繼承父標籤的一部分樣式屬性（如：text-, font-, line-, color 這些屬性子元素都可以繼承）

        div {
            font-size: 14px;
            color: aqua;
            /* 改變子元素的行高，即子元素的font*line-height */
            line-height: 1.5; 
        }

        /* 子元素會繼承父元素的行高，即：此時 p標籤的行高為 20px * 1.5  */
        p {
            font-size: 20px;
        }

    
 
<!-- 子標籤 p 會繼承父標籤div 的font-size和color屬性 -->
    <div>
        <p>子元素可以繼承父元素的一部分css屬性:</p>
        <!-- 子元素會繼承父元素的行高和文字大小，即：此時 div標籤的行高為 14px * 1.5  -->
        <div>如：text-, font-, line-, color 這些屬性子元素都可以繼承</div>
    </div>

優先順序：當同一個元素繫結多個選擇器就會產生優先順序問題，權重大的選擇器css效果會被實現。

選擇器的權重：繼承或者通配 << 元素選擇器 << 類選擇器，偽類選擇器 << id選擇器 << 行內樣式 style = "" << !important

權重疊加：n+1 個相同權重的不同的選擇器權重 > n個相同權重的不同的選擇器權重; 但是一定不會出現 n+1權重小的選擇器> 一個權重大的選擇器

    <style>
        /* ul li 的權重大於 繼承的權重 所以中間的 li 是粉色不是紅色 */
        ul li {
            color: pink;
        }
 


        /* 類選擇器 .li1 權重 大於  ul li 的權重 所以第一個li是藍色*/
        .li1 {
            color: blue;
        }

        /* id選擇器 #li3 的權重 大於 類選擇器 .li1 權重 所以最後一個li 是金色*/
        #li3 {
            color: gold;
        }
        
        div {
            color: red;
            font-size: 14px;
        }
    </style>



    <div>
        <p>選擇器的權重：繼承或者通配 << 元素選擇器 << 類選擇器，偽類選擇器 << id選擇器 << 行內樣式 style = "" << !important</p>
        <ul>
            <li class="li1">我是藍色</li>
            <li>我是粉色</li>
            <li class="li1" id="li3">我是金色</li>
        </ul>
    </div>