# 選擇器
[TOC]
## 通配符選擇器
使用"\*"表示通配符,用來選擇頁面所有元素的樣式。
```css
* {
padding:0px;
margin:0px;
}
```
## 元素選擇器
元素選擇器是最簡單的選擇器,用于選擇指定元素名稱的所有元素。
~~~html
HTML:<element></element>
CSS:element {...}
~~~
## id選擇器
id屬性規定HTML元素的唯一id。
id屬性值的命名規范:
* 不能以數字開頭
* 之后可以跟字母,數字,連字符,下劃線等
* **大小寫敏感**
>[danger] 需要注意的是id在HTML文檔中具有唯一性,是**不可以重復**的。
id選擇器中的樣式會對具有指定id屬性的HTML元素起作用。
HTML元素以id屬性來設置id選擇器,CSS中id選擇器以"\#"來定義。
```html
HTML:<element id="idValue" ></element>
CSS:#idValue {...}
```
>[warning] CSS中id選擇器**使用“#”+id值**,來定義樣式。
## 類選擇器
class定義元素的類名。
語法結構:`<element class="classname1 classname2 …"> `
classname:規定元素的類名稱。如果需要為一個元素設定多個類,使用空格隔開。
命名規則:
* 不能以數字開頭
* 其后字符:字母,數字,連字符(-),下劃線(_)等
* 大小寫敏感
類選擇器指定的樣式對指定class屬性的元素起作用。
使用“.”標識一個類選擇符,類名可以重復使用。
>[info]class選擇器用于描述一組元素的樣式,class選擇器有別于id選擇器,class可以在多個元素中使用。也可以在一個元素中使用多個
```html
HTML:<element class="classname1 classname2 …"></element>
CSS: .classname1 {...}
.classname2 {...}
```
>[warning] 在CSS中,類選擇器以"**.**"+classname表示
## 包含選擇器
包涵選擇器用于指定處于某個選擇器對應的內部元素。
```css
h1 em {color:red;}
```
## 子選擇器
子選擇器要求目標選擇器必須作為外部選擇器對應的元素的直接子元素。
>[danger]注意:子選擇器與包含選擇器的區別就在于是否是**直接**的父子關系,而不是爺爺與孫子這樣的關系
```css
parent>child{width: 200px; height: 35px;}
```
## 群組選擇器
群組選擇器使用逗號對選擇符進行分隔。
> 我們可以將逗號讀成“和”。
```css
h1,p,myClass,#main{
font-size:20px;
}
```