技術標籤：選擇器優先順序

當 css 選擇器有兩個以上的標記時，分別有三種形式，一種是用空格隔開，比如下面這個：

        div h1{
            background-color: red;
            width:100px;
            height:100px;
        }

對所有父標籤為 div 的 h1 實行 css 樣式。

另一種使用逗號隔開，比如說：

        div,h1{
            background-color: yellow;
            width:100px;
            height: 100px;
        }
 

這種寫法的意思是，給所有的 div 和 h1 使用上述 css 樣式，其等價於：

        div{
            background-color: yellow;
            width:100px;
            height: 100px;
        }
        h1{
            background-color: yellow;
            width:100px;
            height: 100px;
        }

再有一種寫法是兩個選擇器粘在一起的，比如下面這種樣式：

        .div.div1{
            background-color: turquoise; //淺藍
            width: 100px;
            height: 100px;
        }
 

它的意思是，同時擁有 div div1 class 的所有元素。

那麼下面的 html，如果把上述所有 css 都用上的話，下面的輸出應該是什麼顏色的？注意：你需要考慮選擇器優先順序，如果不熟悉可以看這篇文章。

    <div class='div div1'>

    </div>
    <div class='div'>
        <div class='div1'>

        </div>
    </div>
    <div>
        <h1>
        </h1>
    </div>
    <div>

    </div>
    <h1>

    </h1>
 

顯然 .div.div1 的優先順序是最高的，因此，第一個方塊是藍色的。第二個方塊是黃色的，因為並沒有 div div 選擇器。第三個，這個 div h1 的優先順序會比 h1 的優先順序更高，因此是紅色的。第四個，第五個，都是黃色的。因此，答案是藍，黃，紅，黃，黃。

後面我會講選擇器效能優化問題，今天沒多少時間了，先結束。