css 选择器类型有哪几种？ 1.选择器的作用 当我们把页面的结构做完之后，想要对页面中的素进行一对一或者一对多的样式调整，就需要使用选择器。 例如：我们在页面里共插入了四张图片，四张图片的大小都一致，如果我们给每张图片都添加宽高，就比较麻烦。这时候可以用css选择器选中所有图片，这时只需要做一次宽高设置即可。 （一）基本选择器 1、标签选择器 标签选择器（素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中标签指定统一的 CSS 样式。 作用：标签选择器可以把某一类标签全部选择出来 权重：1 2、类选择器 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器 作用：标签选择器可以把某一类标签全部选择出来 注意： 1、类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的） 2、类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的） 3、不要使用纯数字、中文等命名，尽量使用英文字母来表示 4、命名要有意义，尽量使别人一眼就知道这个类名的目的 代码演示： 权重：10 3、id选择器 id 选择器可以为标有特定 id 的 HTML 素指定特定的样式 权重：100 4、通配符选择器 在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有素（标签）代码演示： 权重：0 5、思维导图
其中权重不能直接说成 1、10、100这样，但可以这样理解，这样理解更方便！ (二)层次选择器 1.后代选择器（包含选择器） （1）语法格式：该选择器指向的是某节点的某个后代结点，使用选择器之间有空格分隔例如： （2） 使用场景：当我们需要把父素下所有后代素样式统一时 （3）为什么要使用后代选择器而不用class选择器呢？因为当我们在做一个复杂页面时，代码量非常多，如果我们设置一个样式就定义一个class，那么我们很难区分各个类，并且起名会起到头秃。 案例：我们现在需要将一个类名为item的div下所有的p标签全部设置为红色字体。这时候我们给所有的p标签添加class是非常麻烦的。但是用后代选择器可以解决掉，代码如下： .item p{color:red;} 
2.子代选择器 （1）语法格式：父素>子素{属性:属性值;} （2）使用场景：当我们需要把段落1、2、5的文字改成绿色，加粗时。如果使用包含选择器，就会把段落3、4一起改变。
这种情况就需要用子代选择器 代码如下：div>p{color:green;font-weight:bold;} 3.相邻兄弟选择器 （1）语法格式：前面的素+后面的素{属性:属性值;} （2）使用场景：当我们需要给段落5改变字体颜色为黄色时，命名比较麻烦，就可以用。 .item>div+p{color:yellow;} 4.通用兄弟选择器 （1）语法格式: 前面的素~后面需要改变的素{属性:属性值;} （2）使用场景：当我们需要把段落5设置格式时，代码如下 .item>div~p{} 三、 并集选择器 提示：并集选择器可以选择多组标签，同时定义、相同样式，并集选择器是各选择器通用英文逗号“,”链接而成。
注意： （1）、素1和素2用逗号隔开。 （2）、逗号可以理解为“和”意思。 （3）、并集选择器通常用于具体声明。 显示结果：
2. 交集选择器 交集选择器的写法为： 选择器A选择器B ，两个选择器之间是连起来的，没有分隔。指向既满足选择器A且满足选择器B的素结点 
3、伪类选择器 其对应几种不同的状态：：超链接之前（对于标签）：超链接之后（对于标签）：是某个标签获得焦点的时候（比如某个输入框获得焦点）：鼠标放到某个标签上的时候：某个标签没有松鼠标时 序选择器 通过 XXX:first-child 选择XXX下的第一个子代结点；通过 XXX:last-child 选择XXX下的最后一个子代结点。
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/51882.html
