CSS 选择器

前言

---

基础选择器

以下是几种常见的基础选择器。

标签选择器：通过HTML标签名称选择元素。

例如：

p {
    color: red;
}

上述样式规则将选择所有<p>标签 ，并将其文字颜色设置为红色。

---

类选择器：通过类名选择元素。使用类选择器时需要在类名前加上英文句点.。

例如：

<p class="myp">这是p标签。</p>

.myp {
    font: size 16px;
}

上述样式规则将选择所有具有class="myp"属性的元素。并将它们的字体大小设置为16像素。

---

ID选择器：通过元素的唯一ID选择元素。使用ID选择器时，在CSS中需要在ID名称前加上井号#。

例如：

<div id="mydiv">这是一个div元素。</div>

#mydiv {
    background-color: blue;
}

上述样式规则将选择具有id="mydiv" 的元素，并将它们的背景颜色设置为蓝色。

---

复合选择器

复合选择器是由多个基础选择器通过不同的方式组合而成的，用于更精确地选择目标元素。

后代选择器

后代选择器用于选择某个元素的后代元素。父子选择器之间用空格隔开。

语法：

父选择器 子选择器 {
    /* 样式规则 */
}

示例：

选择<div>元素内部所有的<p>元素。

div p {
    /* 样式规则 */
}

后代选择器支持多级嵌套，即可以选择更深层次的后代元素。例如：

选择<div>元素内部的<ul>元素，再选择其中的<li>元素，最后选择<li>元素内部的<a>元素。

div ul li a {
    /* 样式规则 */
}

 通过合理运用后代选择器，你可以针对特定的HTML结构来选择需要应用样式的元素，实现更精确的样式控制。

---

子代选择器

子代选择器用于选择某个元素的直接子元素。父子选择器之间用 > 符号隔开。

语法：

父选择器 > 子选择器 {
    /* 样式规则 */
}

示例：

选择<div>元素下直接的所有<p>元素。

div > p {
    /* 样式规则 */
}

相比于后代选择器，子代选择器的作用范围更加精确，只选择直接子元素，不包括孙子元素及以下元素。

---

并集选择器

并集选择器用于同时选择多个不同类型的元素或相同类型的元素。选择器之间用 , 隔开。

语法：

选择器1, 选择器2, 选择器3 {
    /* 样式规则 */
}

示例：

同时选择<h1>和<h2>元素。

h1, h2 {
    /* 样式规则 */
}

通过合理运用并集选择器，你可以灵活地选择多个元素，并对它们进行统一的样式设置，实现样式的复用和统一管理。

---

伪类选择器-超链接

在CSS中，可以使用伪类选择器为超链接元素（<a>标签）应用不同的样式。以下是几个常用的超链接伪类选择器：

选择器	作用
:link	匹配未访问的连接状态
:visited	匹配已访问的链接状态
:hover	匹配鼠标悬停在链接上的状态
:active	匹配被激活（点击）的状态

示例：

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: red;
}

上述代码中，:link 选择器设置未访问的链接为蓝色，:visited 选择器设置已访问的链接为紫色，:hover 选择器在鼠标悬停时添加下划线，:active 选择器在被点击时将链接颜色设为红色。

需要注意的是，在设置超链接的颜色时，应该按照 :link、:visited、:hover、:active 的顺序进行设置，以确保样式生效。

---

结构伪类选择器

结构伪类选择器是CSS中一种用于选择元素在其位置上的特殊状态或结构关系的选择器。它们依赖于元素在文档中的位置、层次结构或其他结构性属性来进行选择。 

以下是几个常用的结构伪类选择器：

选择器	说明
:first-child	选取父元素下的第一个子元素
:last-child	选取父元素下的最后一个子元素
:nth-child(n)	选取父元素下的第n个子元素，可以使用数字、关键字（如even表示偶数，odd表示奇数）或公式形式（如2n+1）进行指定。
:nth-last-child(n)	与 :nth-child(n) 类似，但从末尾开始计数。
:only-child	选取父元素中唯一一个子元素。

---

伪元素选择器

 

示例：

测试HTML代码：

<ul>
    <li>li-1</li>
    <li>li-2</li>
    <li>li-3</li>
    <li>li-4</li>
    <li>li-5</li>
    <li>li-6</li>
    <li>li-7</li>
    <li>li-8</li>
    <li>li-9</li>
    <li>li-10</li>
</ul>

 预览：

---

1.选取第一个<li>标签，并设置背景颜色：

li:first-child {
    background-color: green;
}

预览：

2.选取前5个<li>标签，并设置背景颜色：

li:nth-child(-n+5) {
    background-color: green;
}

 预览：

需要注意的是，结构伪类选择器只会考虑该元素在其父元素的直接子元素中的位置，而不会考虑更深层次的关系。 

---

伪元素选择器 

伪元素选择器用于选择元素的特定部分，而不是整个元素本身。它们以双冒号 :: 开头。

以下是常用的伪元素选择器：

选择器	说明
::before	在目标元素的内容前面插入一个虚拟元素，并可以通过CSS设置其样式。
::after	在目标元素的内容后面插入一个虚拟元素，并可以通过CSS设置其样式。
::first-letter	选取目标元素的第一个字母或汉字，并可以通过CSS设置其样式。
::first-line	选取目标元素的第一行文本，并可以通过CSS设置其样式。
::selection	选取用户选择的文本部分，并可以通过CSS设置选择文本的样式。

伪元素选择器可以为页面增加一些装饰或样式效果，例如下图的侧导航的小箭头

---

示例：

在按钮文本前面插入一个图标。

HTML代码：

<button class="icon-button">Click Me</button>

CSS代码：

.icon-button::before {
    content: "\f054";  /* 使用Unicode或CSS content值指定图表内容 */
    font-family: font awesome;  /* 使用自定义字体或图标库 */
    margin-right: 5px;  /* 调整图标与文本间距离 */
}

预览：