00、CSS選擇器

CSS的選擇器分類如下圖，其中最最常用的就是基礎選擇器中的三種：元素選擇器、類選擇器、id選擇器。偽類選擇器就是元素的不同行為、狀態，或邏輯。然後不同的選擇器組合，基於不同的組合關係，產生了6中組合關係選擇器。

01、基礎選擇器（5）

1.1、通配選擇器：*{}

針對所有HTML標籤全部適用，選擇器名=星號*（萬用字元），一般只做初始化使用。在 CSS3 中，星號 (*) 可以和名稱空間組合使用，如 ns|*{}。

/* 通用選擇器，針對所有標籤 */
* {
    color: black;
    font-size: 15px;
    box-sizing: border-box; margin: 0px; padding: 0px;
    font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微軟雅黑", STXihei, "華文細黑", Heiti, "黑體", SimSun, "宋體", sans-serif;
}

1.2、元素選擇器：元素名{}

用元素名稱作為選擇器名稱，如p、h1、div、img等，對作用域內所有該標籤元素生效，所以常用來描述某一元素的共性。

hr {
    margin: 32px 5px;
}
h1 {
    background-color: lightblue;
    text-indent: 0.5em;
}

1.3、類選擇器：.類名{}

定義時前面加點.類名，在標籤的屬性「class」使用該樣式，這應該算是最常用的選擇器了。

/* 類名class選擇器 */
.particle{
    font-size: 18px;
    font-family: 楷體;
}
.pindent{
    text-indent: 2em;
}
<p class="particle pindent">一段文字內容-section</p>

類選擇器可以給所有需要的元素使用，可同時給多個元素使用，應用廣泛。

• 類名字母開頭（小寫），不能以數位開頭。
• 同一個標籤可以用多個類選擇器，空格隔開。基於此，一般會將樣式抽象、分類為多個類樣式，便於複用。

1.4、id選擇器：#id{}

用標籤的id作為選擇器名稱，加井號「#」，針對作用域內指定id的標籤生效，所以只能使用一次。

• ID是標籤的唯一標識，不能重複。如果id重複，樣式其實是會生效的，但查詢元素（document.getElementById(id)）只會返回第一個。
• ID字母開頭（小寫），不能以數位開頭。

/* id選擇器 */
#a1{
    color:blueviolet;
    font-size: 16px;
    text-decoration-line:underline ;
}

1.5、屬性選擇器：[屬性=value]{}

元素都有屬性，屬性選擇器是在其他選擇器的基礎上加上屬性的篩選，用來篩選有特定屬性、或屬性值的元素，css3特性。這裡的屬性值匹配是大小寫敏感的，結尾加上字元i（li[title*= "a" i]），則會忽略大小寫敏感。

<style>
li[title]{
    color: red;
}
li[title="a"]{
    font-weight: bold;
}
li[title~="a"]{
    text-decoration: underline;
}
li[title|="a"]{
    text-indent: 2em;
}
li[title^= "a"]{
    text-shadow: 2px 2px 3px black;
}
li[title$= "a"]{
    background: center url(../res/bimg.jpg);
}
li[title*= "a"]{
    background-color: azure;
}
.cli[title]{
    font-style: italic;
}
</style>

<ul>
  <li title="a">item1：a</li>
  <li title="a b">item2：a b</li>
  <li title="c a b">item2</li>
  <li title="a-b" class="cli">item4：a-b</li>
  <li title="abc" class="cli">item5：abc</li>
  <li title="cab" class="cli">item6：cab</li>
  <li title="cba" class="cli">item7：cba</li>
  <li title="cbA1" class="cli">item8：cbA1</li>
</ul>

02、偽類選擇器（43）

2.1、偽類選擇器:

偽類是選擇器的一種，用於選擇處於特定狀態的元素。比如第一個元素、最後一個、奇數序列，或者是當滑鼠指標懸浮時的狀態。

偽類選擇器開頭為冒號 ：，如a:hover{} 表示a元素滑鼠懸浮時的狀態（樣式）

和使用者互動有關的偽類，也叫使用者行為偽類，或叫做動態偽類，比如:link、:active、:visited、:hover。