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;
cssclass属性}
解释：选中的是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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。