CSS基礎之選擇器

CSS選擇器

常用的樣式選擇器包括：HTML選擇器、類選擇器、ID選擇器、組合選擇器、關聯選擇器、僞類和僞元素。

4.1HTML選擇器
    h1{ color:red }

4.2類選擇器
    同一選擇器有不同的類(class)，因而允許同一元素有不同樣式。
    p.dark-row { background-color:red; }
    p.light-row { background-color:green; }

    <p class="dark-row">第一段</p>
    <p class="light-row">第二段</p>

4.3ID選擇器
    id屬性指定了某一單一元素，id選擇器用來對這個單一元素定義單獨的樣式。
    id是用在唯一的元素上，class則用在不止一個元素上。

    #main { text-indent:3em }
    <p id="main">文本縮進3em</p>

4.4關聯選擇器
    table a{ color:red }

4.5組合選擇器
    爲了減少樣式表的重複聲明，組合的選擇器聲明是允許的，只要用英文逗號(,)隔開選擇器。
    h1,h2,h3,h4,h5,h6{ color:red; }

4.6僞元素選擇器
    僞元素選擇器是指對同一HTML元素不同狀態的一種定義方式。
    目前只有<a> <p>標籤可用。

  僞類：
    a:link{color:red;}                          /* 超鏈接沒有任何動作前的狀態 */
    a:hover{color=yellow;font-size:125%;}       /* 光標移動到超鏈接的狀態 */
    a:active{color:blue;font-size:125%;}        /* 選中鏈接時的狀態 */
    a:visited{color:green;font-size:85%;}       /* 訪問過的超鏈接的狀態 */
    a:focus
    對象成爲輸入焦點時
    a:first-child
    對象的第一個子對象
    a:first
    頁面的第一頁

  僞對象：
    p:after          設置某個對象之後的內容
    p:first-letter   一個段落中首個字母的狀態   
    P:first-line    一個段落中首行的狀態
    :before         設置某一對象之前的內容

    主要選擇器的優先級：關聯選擇器》ID選擇器》類選擇器》HTML選擇器

類選擇器和ID選擇器的相同點和不同點：
    相同點：可以應用於任何元素
    不同點：
1.ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2.可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。