CSS中常见的选择器分类及用法简介

摘要：本文主要介绍CSS中常见的选择器分类及用法简介，旨在让读者了解各种选择器的功能及用法，更好地了解CSS的基础知识。

图片：

一、基本选择器

CSS的基本选择器主要包括标签选择器、类选择器、ID选择器和通配符选择器。

标签选择器是通过标签名选取某个或某些HTML标签，例如：p标签选择器可以选中HTML文件中所有的段落。类选择器则是通过class属性选取元素，例如：.red可以选取所有class属性为red的元素。ID选择器是通过id属性选取元素，例如：#header可以选取id属性为header的元素。通配符选择器适用于所有元素，例如：*可以选中HTML文件中所有元素。

这些选择器相对简单，容易理解，但是使用范围有限，不够灵活。

二、层次选择器

层次选择器是CSS选择器最基本的一种。它通过元素的位置关系，选择元素或元素组。

基本的层次选择器包括后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器。

后代选择器（A B）选取A元素内的所有B元素，例如：div p可以选中div标签内所有的p标签。子选择器（A>B）选取A元素的直接子元素B，例如：div>p可以选中div标签下的p标签。相邻兄弟选择器（A+B）选取A元素相邻的下一个元素B，例如：h1+p可以选中紧接在h1标签后面的p标签。通用兄弟选择器（A~B）选取A元素后面所有的兄弟元素B，例如：p~ul可以选中p标签后面的所有ul标签。

层次选择器的特点在于定位元素的位置，用于定位兄弟关系的元素，比较常用。

三、属性选择器

属性选择器是在元素中添加指定属性的一种选择方式。

属性选择器包括有属性选择器、属性值选择器、属性选择器的子集。

有属性选择器（[attr]）选取含有属性attr的元素，例如：[href]可以选中所有含有href属性的元素。属性值选择器（[attr=value]）选取含有指定属性及属性值的元素，例如：[href="https://vps.456.cn/p/48778.html#nav"]可以选中href属性值等于#nav的元素。属性选择器的子集则是针对属性值的部分信息进行选择，例如：[attr^=value]选取属性值以value开头的元素，[attr$=value]选取属性值以value结尾的元素，[attr*=value]选取属性值包含value的元素。

属性选择器在很多时候可以非常方便地定位元素，特别是用于处理一些属性动态变化的元素时，有比较好的应用。

四、伪类和伪元素选择器

伪类和伪元素是一种特殊的选择器，它们可以选取元素的某个状态或者元素的某个部分。

常用的伪类选择器有:hover、:active、:focus、:first-child、:last-child、:nth-child。其中:hover可以选取鼠标悬停的元素，:focus选择表单元素获得焦点的状态，:active表示选取激活状态下的元素，:first-child表示选取父元素下第一个子元素，:last-child选取父元素下最后一个子元素，:nth-child(n)选取父元素的第n个子元素。

伪元素选择器则是用来选择元素的某个部分，例如：::before可以将CSS样式添加到选定元素的内容前面，::after可以将CSS样式添加到选定元素的内容之后。

伪类和伪元素选择器应用广泛，使得CSS更加灵活多样。