CSS选择器总结

一、标签选择器

结构： 标签名 {

css属性:属性值;

}

注意点：标签选择器选择的是一类标签，而不是一个

不会受到结构的深度影响，只要是同名的，就能选中

二、类选择器

结构：.类名 {

css属性:属性值;

}

步骤： 1.找到标签，给标签设置一个属性，class属性

2.在class属性上设置一个名字（类名），类名的命名可以由字母、数字、下划线、中划线组成，但是不能用数字开头

3.在style标签中或者是.css文件中使用类选择器

注意点： 1.类选择器是以 . 开头的

2.class属性是所有标签的通用属性

3.类名规范要搞清楚，一个标签可以有多个类名，类名之间用空格隔开

4.类名是可以重复使用的，只要有对应的类名，那么样式就会生效；一个类选择器可以对应多个标签，类名就像是人类的名字

三、id选择器

结构：#id属性值 {

css属性:属性值;

}

步骤： 1.找到标签，给标签设置一个属性，id属性

2.在id属性上设置一个名字（类名），类名的命名可以由字母、数字、下划线、中划线组成，但是不能用数字开头

3.在style标签中或者是.css文件中使用类选择器

注意点： 1.类选择器是以 .#开头的

2.id属性是所有标签的通用属性

3.id是唯一的，不能重复的，所有的id选择器只能作用于一个标签

4.id唯一不重复，只能选中一个标签，就像是身份证

四、通配符选择器

结构：* {

css属性:属性值;

}

作用：通过*选中所有的标签，设置样式，做初始化的时候用

注意点： 尽量少用，最多使用一次

*{

margin:0;

padding:0;

} 去除所有标签的内外边距

五、后代选择器

结构：选择器1 选择器2 {

css属性:属性值

} 是用空格隔开的

作用：在所有的后代中，先通过选择器1找到一堆元素，在这堆元素中再去找符合选择器2的元素，进行样式的设置 后代包含儿子、孙子、重孙子...

注意点：1、必须是用空格隔开

2、选择器没有限制，只要语法正确

3、要理解什么是后代

六、子代选择器

结构：选择器1 > 选择器2 {

css属性:属性值

} 是用 > 隔开的

作用：在所有的子代中，先通过选择器1找到一堆元素，在这堆元素中再去找符合选择器2的元素，进行样式的设置 子代只包含儿子

注意点：1、必须是用 > 隔开

2、选择器没有限制，只要语法正确

3、要理解什么是子代

七、并集选择器

结构： 选择器1,

选择器2,

选择器3 {

css属性:属性值；

} 使用 , 隔开

作用：只要符合其中一个选择器，就能把样式给到元素 满足其中一个选择器

是同时作用于多个标签/多个选择器上

注意点：1、用 , 隔开

2、建议大家写的时候，每个选择器一行，更加规范和方便阅读

八、交集选择器

结构：选择器1选择器2选择器3 {

css属性:属性值；

}

作用：同时满足多个选择器，才能选中元素标签，设置样式 同时满足多个选择器

注意点：1、如选择器之间什么都不要直接紧挨着写

2、如果遇到选择器中有标签选择器的话，一定要先写标签选择器，然后再写 其他的选择器

九、hover伪类选择器

结构：选择器:hover {

css属性:属性值;

}

作用：是选择标签或者是元素的某一个种状态，需要用鼠标悬停才能看到效果

注意点：1、标签的原本样式是写在标签的选择器中

2、变化的样式写到:hover{}中

3、要用鼠标移动到元素上才能看到效果