CSS选择器是CSS（层叠样式表）中用于选择HTML文档中的元素的一种模式。通过使用选择器，你可以指定哪些HTML元素应该应用哪些样式。
本文我们整体说一下CSS3中的各种选择器。
CSS3选择器分为五大类：
- 基本选择器
- 层次选择器
- 伪类选择器
- 伪元素
- 属性选择器
基本选择器
基本选择器是CSS中使用最频繁、最基础，也是CSS中最早定义的选择器，这部分选择器在CSS1中就定义了。
通过基本选择器可以确定HTML树形结构中大多数的DOM元素节点。
基本选择器语法：
| 选择器 | 类型 | 功能描述 |
| * | 通配选择器 | 选择文档中所有的HTML元素 |
| E | 元素选择器 | 选择指定的类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 |
| selector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
通配选择器：
通配选择器（*）用来选择所有元素，当然也可以选择莫格元素下的所有元素。
*{
color: red;
}所有元素设置属性color。
.demo * {
background: orange;
}元素类名为demo下的所有元素都将背景颜色设置为橙色。
ID选择器：
在使用ID选择器之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不会同时出现id相同的属性值。在CSS 样式中使用id选择器时，需要在id属性值的前面加上“#”号，如（#id）。
<p id="first">
Hello,CSS3!!!
</p>#first{
background-color: blueviolet;
}类选择器：
选择器（class）是以独立于文档元素的方式来指定元素样式。使用方法与ID选择器极其相似，首先在HTML给需要的元素定义class 属性，并为其设置属性值。其与ID选择器有一个很大不同之处。类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个。注意：如果一个多类选择器包含的类名其中有一个不存在，这个选择器将无法找到匹配的元素。
.demo2{
background-color: blue;
}<p class="demo2">
Hello,CSS3!!!
</p>由于类名在一个HTML文档中可以同时存在于不同的元素标签上。换句话说，在一个HTML 文档中，div可以有类名“block”，ul也可以有类名“block”，但有时在Web的页面开发中，仅需要对ul为“block”定义样式，此时仅采用类名选择器并不能达到需要的效果其实CSS选择器还支持带有标签的类名选择器“ul.block”。
ul.block{background: #ccc}群组选择器：
群组选择器（selector1,selectorN）是将具相同样式的元素分组在一起，就是同时对几个选择器设置同样的属性值，每个选择器之间用逗号（，）隔开，例如“selector1, selector2,…, selectorN”。这个逗号告诉浏览器，规则中包含多个不同的选择器，省去逗号就成了后代选择器，这一点大家在使用中千万要小心。
h1,p { background-color:yellow; }选择所有 <p> 元素和 <h1> 元素。
层次选择器
层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
层次选择器语法
层次选择器是一个非常好的选择器，也是大家常用的选择器。
| 选择器 | 类型 | 功能描述 |
| E F | 后代选择器（包含选择器） | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
后代选择器（包含选择器）
后代选择器（E F）也称为包含选择器，作用就是可以选择某元素的后代元素。
例如“E F”，E为祖先元素，F为后代元素，表达的意思就是选择E元素的所有后代F元素。这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论F在E中有多少层级关系，F元素都将被选中。接下来使用后代选择器来改变其背景色。
div div{
background: orange;
}<div>1
<div>2</div>
</div>子选择器
子选择器（E>F）只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F 表示选择了E元素下所有子元素F以这与后代选择器（E F）不一样，在后代选择器中F是E的后代元素，而在E>F中F仅仅是E的子元素而已。
div>div{
background: green;
}<div>1
<div>2</div>
</div>相邻兄弟选择器
相邻兄弟选择器（E+F）可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻，这样就可以使用相邻兄弟选择器来选择F元素。
.active + div{
background: lime;
}<div class="active">1</div>
<div>2</div>通用兄弟选择器
通用兄弟选择器（E~F）是CSS3新增加的，用于选择某元素后面的所有兄弟元素，它们和相邻兄弟选择器类似，需要在同一个父元素之中。也就是说，E和F元素都是同辈元素，并且F元素在E元素之后，E~F将选中E元素后面的所有F元素。
.active ~ div{
background: lime;
}<div class="active">1</div>
<div>2</div>注意：通用兄弟选择器选中的是与E元素相邻的后面兄弟元素F，其选中的是一个或多个元素；而相邻兄弟选择器选中的仅是与E元素相邻并且紧挨的兄弟元素F，其选中的仅是一个元素。
伪类选择器
CSS3 引入了许多新的伪类选择器，这些伪类用于定义元素的特殊状态。
1. 动态伪类:
:hover: 当鼠标悬停在元素上时。
a:hover {
color: red;
}
:active: 当元素被激活（例如，点击）时。
a:active {
color: green;
}
:focus: 当元素获得焦点时（例如，输入框或按钮）。
input:focus {
border: 2px solid blue;
}
2. 结构伪类:
:first-child: 选择作为其父元素的第一个子元素的元素。
ul li:first-child {
font-weight: bold;
}
:last-child: 选择作为其父元素的最后一个子元素的元素。
ul li:last-child {
border-bottom: none;
}
:nth-child(n): 选择作为其父元素的第 n 个子元素的元素。
ul li:nth-child(2n) {
background-color: #f2f2f2;
}
:nth-last-child(n): 从父元素的末尾开始，选择第 n 个子元素。
ul li:nth-last-child(2) {
font-style: italic;
}
:first-of-type: 选择父元素中第一个该类型的子元素。
p:first-of-type {
color: green;
}
:last-of-type: 选择父元素中最后一个该类型的子元素。
p:last-of-type {
color: blue;
}
:nth-of-type(n): 选择父元素中第 n 个该类型的子元素。
p:nth-of-type(2) {
font-size: 20px;
}
:nth-last-of-type(n): 从父元素的末尾开始，选择第 n 个该类型的子元素。
p:nth-last-of-type(2) {
font-weight: bold;
}
:only-child: 选择没有其他兄弟元素的元素。
p:only-child {
border: 1px solid #ccc;
}
:only-of-type: 选择没有其他同类型兄弟元素的元素。
p:only-of-type {
background-color: yellow;
}
- `:empty`: 选择没有子元素的元素。
p:empty {
display: none;
}
3. 否定伪类:
:not(selector): 选择不符合指定选择器的元素。
div:not(.container) {
background-color: #f0f0f0;
}
4. UI 元素状态伪类:
:enabled: 选择可用的表单元素。
input:enabled {
background-color: #ffffff;
}
:disabled: 选择禁用的表单元素。
input:disabled {
background-color: #cccccc;
}
:checked: 选择被选中的单选按钮或复选框。
input[type="radio"]:checked {
background-color: #00ff00;
}
5. 链接伪类:
:link: 选择所有未被访问的链接。
a:link {
color: blue;
}
:visited: 选择所有已被访问的链接。
a:visited {
color: purple;
}
6. 目标伪类:
:target: 选择当前活动的 # 目标元素。
#section1:target {
color: red;
}
7. 语言伪类:
:lang(language): 选择指定语言的元素。
p:lang(en) {
font-family: Arial, sans-serif;
}
8. 页面范围伪类:
:root: 选择文档的根元素。
:root {
--main-bg-color: #ffffff;
}
9. 伪类选择器的组合:
- 伪类选择器可以组合使用，以创建更具体的选择器。
ul li:first-child:hover {
background-color: #ffcc00;
}
这些伪类选择器提供了强大的工具，用于控制元素在不同状态下的样式，增强了网页的交互性和用户体验。
伪元素
CSS3 伪元素是CSS中非常强大的特性之一，它允许你为元素的特定部分添加样式，而这些部分在HTML文档中并不实际存在。伪元素通过在普通选择器后面加上两个冒号（`::`）来表示。伪元素主要用于添加装饰性的内容，如插入图像、创建边框效果、添加高亮显示等。
以下是一些常用的CSS3伪元素：
1. ::before: 在元素的内容前面插入内容。它可以用来插入图标、文本或其他元素。
p::before {
content: ">";
font-weight: bold;
margin-right: 5px;
}
这段代码会在每个`<p>`元素的内容前添加一个加粗的“>”符号，并在符号和文本之间添加一些空间。
2. ::after: 在元素的内容后面插入内容。它可以用来添加后缀、关闭标签或其他装饰。
p::after {
content: " <3";
color: red;
}
这段代码会在每个`<p>`元素的内容后添加一个红色的心形符号。
3. ::first-letter: 用于设置元素中第一个字母的样式，常用于首字下沉效果。
p::first-letter {
font-size: 2em;
font-weight: bold;
}
这段代码会将每个`<p>`元素中的第一个字母放大并加粗。
4. ::first-line: 用于设置元素中第一行文本的样式，可以用来突出显示段落的开头。
p::first-line {
font-variant: small-caps;
color: blue;
}
这段代码会将每个`<p>`元素的第一行文本转换为小型大写字母并设置为蓝色。
5. ::selection: 用于设置用户选择的文本的样式，这可以改变用户高亮文本的外观。
p::selection {
background-color: yellow;
color: black;
}
这段代码会将用户选择的`<p>`元素中的文本背景设置为黄色，文字颜色设置为黑色。
伪元素的`content`属性是使用伪元素时最关键的部分，它定义了要插入的内容。`content`属性可以是文本、图片、URL或甚至是一个计数器。
伪元素非常有用，因为它们允许你添加样式化的元素而不需要修改HTML结构。这使得CSS更加灵活，并且可以创建更丰富的视觉效果。然而，需要注意的是，伪元素添加的内容是不可聚焦的，也就是说，它们不会影响文档的可访问性或键盘导航。
属性选择器
CSS3 属性选择器允许你根据元素的属性和属性值来选择元素。这些选择器可以非常精确地定位页面上的元素，而不需要额外的类或ID。属性选择器的基本语法是使用方括号（`[]`），里面包含属性名和可选的匹配模式。
以下是一些常用的CSS3属性选择器及其用法：
1. 基本属性选择器:
- 选择具有特定属性的元素，不论其属性值如何。
input[type] {
border: 1px solid #ccc;
}
/* 这会选择所有具有type属性的input元素。 */
2. 属性值完全匹配选择器:
- 选择属性值完全等于指定值的元素。
input[type="text"] {
border: 2px solid #333;
}
/* 这会选择所有type属性值为"text"的input元素。 */
3. 属性值包含选择器:
- 选择属性值包含指定字符串的元素。
a[href~="example"] {
color: green;
}
/* 这会选择所有href属性值包含"example"的a元素。 */
4. 属性值以指定值开头选择器:
- 选择属性值以指定字符串开头的元素。
a[href^="https://"] {
color: red;
}
/* 这会选择所有href属性值以"https://"开头的a元素。 */
5. **属性值以指定值结尾选择器**:
- 选择属性值以指定字符串结尾的元素。
a[href$=".pdf"] {
font-weight: bold;
}
/* 这会选择所有href属性值以".pdf"结尾的a元素。 */
6. 属性值包含单词选择器:
- 选择属性值中包含指定单词的元素，单词由空格分隔。
input[type|="text"] {
border: 1px dashed #ccc;
}
/* 这会选择所有type属性值为"text"或以"text-"开头的input元素。 */
7. 属性值匹配模式选择器:
- 选择属性值符合特定模式的元素。这通常用于匹配复杂的属性值。
input[type^="email"] {
background-color: yellow;
}
/* 这会选择所有type属性值以"email"开头的input元素。 */
8. 属性存在选择器:
- 选择具有指定属性的元素，不论其属性值如何。
img[alt] {
border: 1px solid #000;
}
/* 这会选择所有具有alt属性的img元素。 */
9. 属性选择器的组合:
- 属性选择器可以与其他选择器（如类选择器、ID选择器等）组合使用。
div[role="main"] {
background-color: #f0f0f0;
}
/* 这会选择所有具有role属性且值为"main"的div元素。 */
属性选择器非常强大，因为它们允许你根据元素的属性来选择元素，而不仅仅是它们的结构或类名。这在处理具有特定属性的表单元素、链接或其他元素时特别有用。然而，过度使用属性选择器可能会使CSS选择器过于复杂，因此建议在需要时才使用它们。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
