CSS的選擇器種類非常多，它們到底有哪些功能呢？
剛開始學切版的時候因為實在搞不懂選擇器的用法和功能
所以我的選擇器全部都是使用#ID ... class是什麼？跟ID有什麼差別？
完全不知道哇！

今天就簡單分享一下我目前有在使用的CSS選擇器吧！

全域選擇器

*符號為全域選擇器，他會選取頁面上所有元素

*{
  margin: 0;
  padding: 0;
}

我很喜歡用這個方法移除多餘的margin跟padding
可是這個做法還是盡量不要用比較好...!!

ID選擇器 ID selectors

#符號為ID選擇器，他會選取頁面上相符的ID名稱

#content{
  width: 100px;
}

在網頁中ID名稱是唯一的，僅能使用一次，不能被重複使用

類別選擇器 Class selectors

.符號為類別選擇器，他會選擇頁面上相符的class名稱

.content{
  width: 100px;
  height: 100px;
}

跟id不一樣，class可以不斷地重複使用

類型選擇器、標籤選擇器 Type selectors

用來選擇HTML標籤的選擇器

div{
  width: 100px;
  height: 100px;
}

偽類選擇器、虛擬類別選擇器 Pseudo-classes

偽類可以對指定的選擇器增加特殊的效果
冒號前面為指定的選擇器像是a:hover{hover後的樣式}

:link   //連結平常的樣式
:visited   //連結查閱後的樣式
:hover   //滑鼠滑入的樣式
:active   //滑鼠按下的樣式
:focus   //目標為焦點的樣式
:lang(E)   //當語言為E的樣式
:first-child   //第一個元素的樣式

偽元素選擇器、虛擬元素選擇器 Pseudo-elements

偽元素要使用兩個冒號來表示，雖然用一個冒號也能正常運作
可是為了方便區分，還是使用兩個冒號會比較好！
偽元素也會繼承原本元素的屬性，如果原本屬性的文字是黑色
那麼偽元素的文字也會是黑色的

::before //在原本的元素之前加入內容
::after //在原本的元素之後加入內容

群組選擇器 Group of selectors

同時對一個以上的元素套用樣式就可以這樣使用
假如我想選擇a跟p

a, p{
  color: blue;
}

選擇器有好多好多，目前使用的只有其中的一小部分而已
還有很多沒使用過的選擇器，希望以後有機會可以玩玩看！

學習資料
MIS腳印 記錄 IT 學習的軌跡-CSS 選擇器（Selectors）

w3school