CSS基礎選擇器

CSS基礎選擇器

1. 標籤選擇器（元素選擇器）

使用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的樣式。

標籤名 {
    屬性1: 屬性值1;
    屬性2: 屬性值2;
    屬性3: 屬性值3;
    ...
}
/*例如將全部的span改成藍色背景*/
span {
    background-color: blue;
}

做用：

標籤選擇器能夠把某一類標籤所有選擇出來，好比全部的div標籤。

優勢：

能快速爲頁面中同類型的標籤統一設置樣式。

缺點：

不能設計差別化樣式，只能選擇所有的當前標籤。

2. 類選擇器

能夠差別化選擇不一樣的標籤，單獨選一個或某幾個標籤。

類選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個「.」表示。

.類名 {
    屬性1: 屬性值1;
    ...
}
/*例如將擁有blue類的HTML元素均設爲藍色*/
.blue {
    color: blue;
}
/*某個HTML元素要使用上面的樣式時，經過調用類名使用*/
<div class="blue"></div>

注：

1. 注意類名前的小點
2. 長名稱或多個詞組可使用"_"隔開
3. 儘可能使用英文字母表示
4. 命名要有意義

3. 類選擇器-多類名

能夠給一個標籤指定多個類名，從而達到更多的選擇目的。

<div class="blue font18"></div>

多類名使用方式

1. 在標籤class屬性中寫多個類名
2. 多個類名之間必須用空格分開
3. 這個標籤就能夠分別具備這些類名的樣式

多類名在開發中的使用場景

能夠把一些標籤元素相同的樣式（共同的部分）放到一個類裏面，這些標籤均可以調用這個公共的類，而後再調用本身獨有的類，從而節省CSS代碼，統一修改也很是方便。

4. id選擇器

能夠爲標有特定id的HTML元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器，CSS中id選擇器以「#」來定義。

#id名 {
    屬性1: 屬性值1;
    ...
}
/*例如將id爲blue的元素的內容設置爲藍色*/
#blue {
    color: blue;
}
/*某個HTML元素要使用上面的樣式時，經過id名調用*/
<div id="blue"></div>

id選擇器與類選擇器的區別：

1. 類選擇器可使用屢次，id選擇器只能使用一次
2. 類選擇器在修改樣式中用的最多，id選擇器通常用於頁面惟一性的元素上，常常和JavaScript搭配使用

5. 通配符選擇器

選取頁面中全部元素。在CSS中，使用「*」定義。

/*清除全部元素初始指定的內外邊距*/
* {
    margin: 0;
    padding: 0;
}

注：通配符選擇器不須要調用，自動就給全部的元素使用樣式。

6.總結

基礎選擇器	做用	特色	使用狀況	用法
標籤選擇器	能夠選出全部相同的標籤	不能差別化選擇	較多	p {color: blue;}
類選擇器	能夠選出一個或多個標籤	能夠根據需求選擇	很是多	.blue {color: blue;}
id選擇器	一次只能選擇一個標籤	id屬性只能在每一個HTML文檔中出現一次	通常和js搭配	#blue {color: blue;}
通配符選擇器	選擇全部的標籤	選擇的太多，有部分不須要	特殊狀況使用	* {color: blue;}