首先來說一下，什麽是選擇器。在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素之後就可以為它們設置樣式了。 選擇器為樣式規則指定一個作用範圍。

基本選擇器

標簽選擇器

顧名思義就是通過標簽名來選擇元素：

• 標簽選擇器可以選中所有的標簽元素，比如div，ul，li ，p等等
• 不管標簽藏的多深，都能選中
• 選中的是所有的，而不是某一個，所以說 "共性" 而不是 ”特性“

實例：

p {
  color: red;
}

將所有的p標簽設置字體顏色為紅色。

ID選擇器

通過元素的ID值選擇元素：

• 同一個頁面中 id 不能重復
• 任何的標簽都可以設置 id
• id命名規範 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA

示例：

#i1 {
  color: red;
}

將id值為i1的元素字體顏色設置為紅色。

類選擇器

通過樣式類選擇元素：

• 類就是class；class與id非常相似；任何的標簽都可以加類；但是類是可以重復，歸類
• 同一個標簽中可以攜帶多個類，用空格隔開
• 類的使用能夠決定前端工程師的css水平到底有多牛逼，要多用，一定要有”公共類“的概念

總結：

• 不要去試圖用一個類將我們的頁面寫完。這個標簽要攜帶多個類，共同設置樣式
• 每個類要盡可能的小，有公共的概念，能夠讓更多的標簽使用
• 到底使用id還是用class？
  • 答案：盡可能的用class。除非一些特殊情況可以用id
  • 原因：id一般是用在js的。也就是說 js是通過id來獲取到標簽

示例：

.c1 {
  color: red;
}

將所有樣式類含.c1的元素設置字體顏色為紅色。

通用選擇器

使用*選擇所有元素：

* {
  color: black;
}

因為效率低的原因，一般不用

組合選擇器

屬性選擇器

分組選擇器

偽類選擇器

偽元素選擇器

選擇器的優先級

CSS各類選擇器總結