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;
			}