前端成长之路：CSS复合选择器

复合选择器

在CSS中，可以根据选择器的类型将选择器分为基础选择器和复合选择器。 基础选择器就是前面提到过的类选择器、id选择器、标签选择器等；而复合选择器就是在基础选择器的基础之上，将基本选择器进行组合形成的。 复合选择器是由两个及以上的基础选择器，通过不同的方式组合而成的。复合选择器可以更加准确、高效的选择目标元素。

后代选择器

后代选择器又称为包含选择器，该选择器可以选择父元素中的子元素。其写法就是将外层标签写在前面，内层标签写在后面，中间使用空格进行分隔。当标签发生嵌套时，内层标签就成为了外层标签的后代。

如这个代码所示，这是一个后代选择器，当标签发生嵌套（不管嵌套的层级有多深），只要li标签在ul标签里面，那么li就成为外层标签ul的后代，上述后代选择器选择的是ul标签中的所有的li（不是ul中的li就不会被选择）：

可以看到不在ul中的li标签，是不会被这个ul li后代选择器选择到的，所以说其字体样式没有改变。

使用后代选择器的注意事项：

1. 后代选择器是一个复合选择器，需要两个元素，后面的元素是前面元素的后代，两个元素之间使用空格分隔。
2. 后代选择器，顾名思义，该选择器选择的是后代元素。
3. 后代只要在父元素的嵌套中，不管嵌套层级多深，都可以选择到。
4. 后代选择器的构成元素可以是任意的基础选择器。

子选择器

子元素选择器（子选择器）只能选择某元素最近一级的子元素，简单理解就是子选择器将选择该元素的直接子元素（只能有一级的嵌套，就像Java中的直接子类），这点和后代选择器有很大的差别（后代选择器可以选择该元素的所有后代，不管嵌套的层级有多深，都可以选择）。这可以从二者的名字看出，后代选择器，顾名思义，只要是后代都可以选；子选择器，顾名思义，只能选择儿子（最近那一级的元素）。

子选择器的构成是：元素1 > 元素2 {CSS样式}，这和后代选择器很像，元素2就是元素1的直接后代（子元素），这个选择器也会选择元素2：

此时，在这个子选择器中，div标签就是父级元素，p标签就是div标签中一级嵌套（直接嵌套）的子级元素，该选择器选择的是div标签中直接的p标签，特别注意：若使用子选择器，那么子元素必须是父元素的“亲儿子”，也就是说两个标签之间只能有一级的嵌套关系：

可以清楚看见，只有一级嵌套关系的p标签才被子选择器选中了，而二级嵌套的p标签就没有被选中，所以说其样式没有改变。总之，子选择器中的子元素必须在父元素中直接嵌套，否则无法选中。

并集选择器

并集选择器可以选择多组标签，同时为这些标签定义相同的样式。通常用于集合声明。

并集选择器是各个选择器通过","连接而成，任何形式的选择器都可以作为并集选择器的一部分：

以看到这个并集选择器就是一个简单的类选择器和一个复合的子选择器连接而成，会选择nav这个类的元素和ul中的直接嵌套的li标签：

在并集选择器中，不同的选择器要使用","（逗号）进行分隔，为了方便理解可以将逗号理解为“和”的意思，那么上述CSS代码就相当于是：类选择器选择nav这个类和子选择器选择ul中的li。

伪类选择器

伪类选择器主要是用于向某些选择器添加特殊的效果。它必须结合其他选择器进行使用，主要目的是为特定状态或位置的元素添加特殊样式。 例如：:hover伪类可以为鼠标悬停在元素上时的元素添加样式；active伪类可以为元素被激活（例如用户点击元素时）时添加样式。

链接伪类选择器

链接伪类选择器是CSS伪类选择器中专门用于处理超链接（<a> 元素）不同状态的一类选择器，它们允许你根据超链接的状态（如未访问、已访问、鼠标悬停、激活）来为其添加不同的样式，以增强用户体验和页面交互性。

1.:link：该伪类选择器是用于尚未被用户访问过的超链接元素（就是用户还没有点击过的超链接），主要是用于设置未访问链接的初始样式（颜色、字体等）。

a:link {
    color: blue;
    text-decoration: none;
}

这样设置CSS，未访问过的超链接就会是蓝色字体，并且没有下划线（默认是有的）。

2.:visited：该伪类选择器是用于用户已经访问过的超链接元素（用户已经点击过的超链接），当用户访问了一个超链接之后，该超链接就会被标记为已访问状态，此时:visited伪类选择器就可以选中，并且为其设置样式：

a:visited {
    color: purple;
    text-decoration: line-through; 
}

这样设置CSS，已经访问过的超链接就会是紫色字体，并且会有一条删除线。

3.:hover：当用户将鼠标指针悬停在超链接元素上时，该伪类选择器会被触发。通常用于创建鼠标悬停时的视觉效果，例如改变链接的颜色、添加背景色或改变字体大小等，以吸引用户的注意力。

a:hover { 
    color: red; 
    background-color: yellow;
}

这样设置CSS，当用户的鼠标指针悬停在超链接元素上时，字体就会变成红色，并且背景会变为黄色，达到吸引用户注意的效果。

4.:active：当用户按下鼠标按键并在该元素上按住鼠标时，该元素就处于激活状态。而active伪类选择器就是为激活状态的元素添加样式：

a:active {
    color: red;
    text-decoration: underline;
}

这样设置CSS，当用户在该链接上按下鼠标时，链接元素处于激活状态，字体颜色变为红色，并且会有一条下划线来提醒用户。

因为超链接标签<a>在浏览器中具有默认的样式，所以说在通常情况下我们需要给链接单独指定样式，而伪类选择器就可以很好的为链接添加样式。一个元素可以有多个伪类选择器，但是想要使用多个选择器必须遵循伪类选择器的书写顺序：:link->:visited->:hover->:active，不按照这个顺序书写多个伪类选择器，那么将会失效。

:focus伪类选择器

:focus伪类选择器用于选择获取了焦点的表单元素。焦点就是光标，在一般情况下，focus伪类选择器一般是针对于表单元素使用的：比如说当我的光标移动到input表单元素上，按钮变色提醒：