迪蘭帝的聊天室

Universal Selector 通用選擇器

使用 * 作為篩檢對象，代表此網頁下所有的物件都遵守 *{} 裡的規則。

Type Selector 屬性選擇器

使用 Html Tag 作為篩檢對象的方法，稱作為屬性選擇器，屬性選擇器會把這份 HTML 文件中所有被選擇到的那種標籤都加上所設定的規則。

          h4{
            font-size:20px;
           }

          div{
             background-color:black;
           }
        

Descendant Selector後代選擇器

當兩個選擇器並排呈現的時候，瀏覽器會從外面往裏面選擇，可以當作是被限制範圍的其他選擇器，相同的只要符合選擇器所篩選的內容都會被套用這些規則。
例如：

住在台北市的人 男生

這兩個篩選條件下的交集，會有很多的結果，這些結果都會套用我們所下的規則。

          div a{
            color:yellow;
          }
          nav li{
            color:red;
          }
       

Child Selector 子選擇器

子選擇器的意味和後代選擇器很類似，但是後代選擇器是對每個後代都作用，但是子選擇器只對緊緊跟在前一個選擇器後面那個作用，若是中間有其他的物件在中間， 那麼就不會套用選擇器的屬性，所以範圍更小了。
例如：

坐在我附近的人 > 男生

在這個條件下，坐在我附近的人中可能有很多個男生，但是坐在我旁邊的男生可能只有兩個人，那麼 這個選擇器的條件就是選擇到這兩個男生，並對他們進行屬性上的設定。

           div > a{
              color:yellow;
           }
        

Adjacent sibling selectors 相鄰選擇器

相鄰選擇器，應該是目前很少用到的一種選擇器，因為尚有部份瀏覽器不支援，我們都知道 HTML 的具有巢狀結構，而前面所提到的後代選擇器和子代選擇器， 都是針對巢狀結構的內層作用，而相鄰選擇器，則是針對同一層的其他元素進行作用，其中使用 + 來進行連接。

            h1+h1{
             color:red;
            }
            /*同層的的第二個 h1 會顯示紅色*/
            h1+h1+h1{
             color:blue;
            }
            /*同層的第三個 h1 會顯示藍色*/
          

Attribute selectors 屬性選擇器

屬性選擇器，是針對標籤裡頭的屬性做更進一步的修改。這個比較難解釋，直接看 code。

            h1[class]{
                color:red;
            }
           /*所有含有 class 屬性的 h1 都會受到影響*/
            h1[class=title]{
               color:red;
            }
           /*所有 class 屬性為 title 這個 class 者都會受到影響*/
           h1[class~=title]{
               color:red;
           }
           /*所有 class 屬性有 title 者都會受到影響*/
           h1[class|=title]{
               color:red;
           }
           /*class 的第一個為 title 者會受到影響*/
         

Class Selector

顧名思義，針對某個 class 進行定義屬性的方式，以 . 為開頭進行定義。

            .box{
               background-color:black;
            }
         

ID Selector

和 Class 選擇器類似，但是指針對某個特定的 ID 進行定義，使用 # 為開頭進行定義。

            #key{
              color:white;
            }
         

Pseudo-classes 偽類

這個東西嘛，其實就是常見的 :hover :active :visited :link 除了常見的這些之外，還有其他三個 :first-child :focus :lang

          p:first-child{
            color:red
          }
         /*first-child 是第一個使用 p 這個標籤者會被設定屬性*/
         p:lang(fr){
           color:red;
         }
        /*符合屬性為 lang(fr) 的標籤才會被套用這個屬性*/
       

Pseudo-elements 偽元素

偽元素的使用和偽類的使用方法類似，皆是使用冒號接上元素名稱。目前偽元素有兩個 :first-letter :first-line。

          p:first-line{
            color:red;
          }
          /*第1行 p 會成為紅色*/

          p:first-letter{
            color:red;
          }
          /*只有第一個字母會變成紅色*/