HTML常用選擇器

常用選擇器

在HTML中常見選擇器有：
元素選擇器、id選擇器、類選擇器（class）、選擇器分組（並集選擇器）、通配選擇器、複合選擇器（交集選擇器）。

元素選擇器
作用：通過元素選擇器可以選擇頁面中的所有指定元素。
語法：標籤名{}

p{
     margin: 0;
 }

id選擇器
作用：通過元素的id值選中唯一的元素。
語法：#id屬性值{}

#p1{
    font-size: 20px;
}

注意：一個HTML中id不允許重複

類選擇器
作用：通過元素的class屬性值選中一組元素。
語法：.class屬性值{}
class屬性值和id屬性值相似，只不過class屬性值可以重複。

.p2{
   font-size: 20px;
}

選擇器分組（並集選擇器）
作用：通過選擇器分組可以同時選中多個選擇器對應的元素。
語法：選擇器1,選擇器2,選擇器n{}

#p1,.p2,h1{
    background-color: blue;
}

通配選擇器
作用：選中頁面中的所有元素。
語法：*{}

*{
    margin: 0;
}

複合選擇器（交集選擇器）

作用：可以選中同時滿足多個選擇器的元素。
語法：選擇器1選擇器2選擇器n{}

span.p3{
    color: yellow;
}

後代選擇器：
前提:在包裹的關係中，樣式有繼承關係
語法： 父類選擇器 子類選擇器{}

/* 使用空格來標識為後代選擇器，其實是縮小了選擇器的查詢範圍而已*/
div span{
	color: #008000;
	}

偽類選擇器：
作用：選取指定元素的樣式進行修改。

<!--  第二個span標籤-->
span:nth-of-type(2){
		color: #FFC0CB;
			}