CSS的选择器有哪些 分别怎么写,列举CSS有哪些种类的选择器并书写范例

分为：1.基础选择器：标签选择器、id选择器、类选择器、通配符选择器。

2.高级选择器：后代选择器、交集选择器、并集选择器。

1.1 标签选择器：通过标签的名字来进行选择。方法：标签名 。选择范围：选中的是整个的HTML文件中的所有同名标签  例：

p{

color: red;

}

h2{

color: green;

}

注意：标签选择器的效果只与标签名相关，与它的嵌套多少层无关，嵌套再深也可以用标签选择器选中。

优点：可以通过一个标签选择器选中所有同名标签，可以清除默认显示样式、或者设置初始样式。

p{

color: red;

margin: 0;

}

缺点：标签选择器选择范围太广，没办法使用标签选择器只给其中部分标签添加特殊样式。

1.2 id选择器：通过标签上的id属性去选择标签。方法：#id属性值。选择范围：只有一个标签。

标签的id属性值命名规则：必须以英文字母开头，后面可以有字母、数字、下划线或横线，区分大小写。一个HTML文件中每个id都是唯一的。例：

这是一个段落标签

#para{

color: red;

}

缺点：不能用同一个id选择器去选中多个标签，如果多个标签具有相同的样式，使用id选择器必须给每个标签添加不同的id属性，通过每个id选择器选中后，需要重复书写相同的css代码。

#para{

color: red;

}

#para2{

color: red;

}

#para3{

color: red;

}

1.3 类选择器：通过标签上的class属性去选择标签。方法：.classname(name是给定义的名字)。选择范围：可以是任意多个，选中的是所有的class属性值相同的标签。

class属性值命名规则：必须以英文字母开头，后面可以有字母、数字、下划线或横线，区分大小写。class属性值可以重复，一个标签的class属性可以有多个属性值。

①不同的标签可以设置相同的class属性值，不限制标签类型，通过类选择器选中的就是所有的同名的标签。例:

.red{

color: red;

}

②一个标签上可以设置多个class属性值，通过每个class属性值得到类选择器都能选中这同一个标签，每个选择器后面的css样式属性都会加载到标签之上。例：

.red{

color: red;

}

.box{

width: 100px;

height: 100px;

background-color: skyblue;

}

1.4 通配符选择器：通过一个可以选中所有标签的符号选择标签。方法：* 。选择范围：选中的是包含body在内的所有的标签。

多使用通配符去选中所有标签，清除一些公共的默认样式。

*{

padding: 0;

margin: 0;

}

2.1后代选择器：又叫包含选择器，通过标签之间的嵌套关系或者包含关系进行标签选择。

方法：空格表示包含的意思，空格左右就是基础选择器，空格左边的选择器选中的标签必须包含空格右边选择器选中的标签，才叫做满足包含关系。例：

ul li p{

color: red;

}

后代选择器必须满足所有基础选择器的包含关系，一层不满足都不能选中标签。

后代选择器是通过不断缩小选择范围，最终选中的是一个小范围内的最后一个选择器规定的标签。例：

ul .big p{

font-size: 20px;

}

解释：选中的是ul标签内部后代中类名叫做big的标签后代中的p标签。

ul p{

color: blue;

}

解释：选中的是ul标签的后代中的所有p标签。

2.2 交集选择器：交集选择器是由基础选择器组成，选中的标签必须满足所有基础选择器限制条件。

方法：将基础选择器连写，中间不要加任何空格或符号。

选择范围：满足所有基础选择器的标签。

交集选择器一般由类选择器和标签选择器组成，标签选择器必须写在开头。例：

p.demo{

color: red;

}

交集选择器可以进行多个类名的连续交集。

p.demo.box{

color: red;

}

表示：选中的是p标签，而且必须同时具备demo和box的类名。

交集选择器可以作为后代选择器或者并集选择器的一部分。

.box1 p.ps1{

color: yellow;

}

解释：选中的是类名叫box1的后代中，既是p标签还有ps1的类名的标签。

2.3 并集选择器：是由前面六种选择器综合组成的。

添加相同样式的标签不能使用前面六种选择器的一种全部选中，可以将多个选择器进行并集书写。

写法：用逗号表示并集的意思，将选择器之间用逗号链接，最后一个选择器后面不要加逗号。

选择范围：是多个选择器选中的标签的集合。并集选择器更像是对相同样式进行的合并书写。

合并前：

.box1 .ps1{

color: red;

}

.box2 .ps2{

color: red;

}

合并后：

.box1 .ps1,.box2 .ps2{

color: red;

}

用途：

①给相同样式的标签的选择器进行合并书写。

②使用标签选择器的并集写法进行清除默认样式。

body,h1,h2,p,ul,ol,li,dl,dt,dd{

margin: 0;

padding: 0;

}