「這是我參與11月更文挑戰的第27天，活動詳情檢視：2021最後一次更文挑戰」

常用CSS基礎樣式（二）

上一篇記錄了css的介紹以及它的三種使用方式。下面接著寫css選擇器的基礎知識點。

最初學習時，習慣將css程式碼以行內方式直接寫在標籤上 或者 又以內嵌方式 寫在頭部標籤中，但是，大量的樣式程式碼佔據頁面導致頁面過長，可觀性變差；行內樣式修改時總會發現很多冗餘部分 重複修改的話工作量又變大。

因此 當後期的不斷學習然後再加上專案逐漸變大且經歷反覆樣式修改的摩擦後，就慢慢開始改變了這個惡習，規規矩矩的將css樣式表脫離出html頁面。

人總是要在不斷的磋磨中慢慢成長的，哈哈。

所以，為了程式碼簡潔化，通常我們推薦使用外部連結的方式引用css 即link標籤的方式。

<link rel="stylesheet" type="text/css" href="style.css">

1. css選擇器

1.1 id選擇器

由於id的唯一性，id選擇器只會匹配HTML元素 id屬性值相對應的唯一元素。id選擇器使用符號 # +id名稱。

```

span1{

color:blue;

}

```

1.2 元素選擇器

元素選擇器即 根據元素名稱來選擇相對應的HTML元素。

```

span{

color:red;

}

```

1.3 類選擇器

類選擇器通過匹配class屬性值來選擇相應的HTMl元素。格式為符號 .+class類名.

```

.span2{

color:pink;

}

```

如需要設定特定標籤且擁有該樣式的元素樣式。則在元素標籤後緊跟類名。如

```

span.span2{

font-size:20px;

}

```

則 只有具有class="span2" 的 span標籤 元素的字型大小會變成 20px ，其他則為預設大小。

注：HTML元素可以有多個類名，中間以空格隔開即可。

1.4 通用選擇器

通用選擇器（*） 用於匹配頁面上全部HTML元素。通常用於設定預設格式，去除預設的邊距和間距等等。

```

*{

margin:0;

padding:0;

font-size:15px;

}

```

1.5 分組選擇器

因部分樣式的重複性太高，為簡化程式碼，一般採用分組選擇器將具有相同樣式定義的HTML元素合併。

```

p,span,a{

font-size:15px;

color:red;

}

```

好啦。選擇器的記錄到這裡就結束了。後面將持續學習進步。加油，奧利給！