筆記-10.2、HTML-CSS選擇器筆記

CSS選擇器：
    指這組樣式所要針對的物件，可以是一個HTML標籤，如body，h1，p，div，a等，也可以是定義了特定id或者class屬性的標籤，如：
        
— 標籤選擇器：
    <div></div> 可以用 div {color:red;}來選擇

— 類選擇器：
    <div class=”red”></div>可以用 .red { color:red;} 來選擇div

— id選擇器：
    <div id=”lay”></div>可以用 #lay｛color:red;｝來選擇

— 後代選擇器：
    表示標籤之間有巢狀關係的選擇方式，如：
        <div>
            <p>p標籤內容</p>
        </div>
    如以上程式碼要選擇p標籤，則可以寫成
        div p {color:red;} 來表示，可以清晰的表明各標籤之間的關係，可增強程式碼的閱讀性。
    注意：每個標籤之間用空格隔開。

— 並集選擇器：
    表示兩個選擇器之間的交集部分的樣式，如：
        <div>
            外層div
            <div class=”nei”>
                內層div
            </div>
        </div>
    如要選擇內層div，則可以寫成：
    div.nei {color:red;} 來表示選擇內層div，外層div不會收到影響。

    再如：
        <div>
            外層div
            <div id=”nei”>
                內層div
            </div>
        </div>
    以上選擇內層div，可以寫成：
        div#nei {color:red;} 來表示內層div，外層同樣也不會收到影響。
    
    那麼，並集選擇器的寫法就是：前面是一個標籤選擇器，其後緊貼一個類選擇器或者是一個ID選擇器，兩者之間不能用空格隔開，必須緊貼著，再者是後面的選擇器不能是標籤選擇器，只能是類選擇器或者ID選擇器。