2025-09-04 CSS2——常见选择器

文章目录

1 元素选择器
2 id 选择器
3 class 选择器
4 通用选择器
5 子元素选择器
6 后代选择器
7 相邻兄弟选择器
8 后续兄弟选择器
9 伪类选择器
10 伪元素选择器
11 属性选择器
- 11.1 `[attribute]`
- 11.2 `[attribute="value"]`
- 11.3 `[attribute~="value"]`与`[attribute*="value"]`
- 11.4 `[attribute|="value"]`与`[attribute^="value"]`
- 11.5 `[attribute$="value"]`

选择器是 CSS 规则的开头部分，用于选择要应用样式的 HTML 元素。选择器非常重要，因为它们决定了你的样式会作用于哪些元素。

选择器类型	符号	描述	示例
元素选择器	`p`	直接通过 HTML 标签名来选择所有同类元素。	`h2 { color: teal; }`
ID 选择器	`#`	通过元素的 `id` 属性来选择特定元素，一个 ID 在文档中必须是唯一的。	`#element { font-size: 35px; }`
class 选择器	`.`	通过元素的 `class` 属性来选择元素，一个类可以被多个元素使用。	`.highlight { background-color: yellow; }`
通用选择器	`*`	选择所有 HTML 元素。常用于重置浏览器默认样式。	`* { font-family: '楷体'; }`
子元素选择器	`>`	选择直接位于父元素内部的子元素。它只选择第一层级的子元素，不包括更深层级的后代。	`.father > p { color: yellowgreen; }`
后代选择器	（空格）	选择位于父元素内部的所有后代元素，无论层级有多深。它包括子元素、孙子元素等。	`.father p { color: coral; }`
相邻兄弟选择器	`+`	选择紧跟在指定元素后面的第一个同级元素。	`h3 + p { background-color: red; }`
后续兄弟选择器	`~`	选取所有指定元素之后的相邻兄弟元素。	`h3 ~ p { background-color: red; }`
伪类选择器	`:`	选择处于特定状态或位置的元素，常用于用户交互。	`:hover` 伪类会在鼠标悬停时应用样式。
伪元素选择器	`::`	用于创建并样式化虚拟元素，而不是选择实际存在的元素。	`::before` 和 `::after` 用于在元素内容前后插入虚拟内容。
属性选择器	`[attribute=value]`	用于根据元素的属性或属性值来选择 HTML 元素。	`[type] { border: 1px solid red; }`

1 元素选择器

通过元素名称选择 HTML 元素。

语法： element { /* 样式 */ }

如下代码，p 选择器将选择所有 <p> 元素:

p {color:red;text-align:center;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>p{color:red;text-align:center;} </style></head><body><p>Hello World!</p><p>这个段落采用CSS样式化。</p></body>
</html>

2 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 “#” 来定义。

语法： #id { /* 样式 */ }

以下的样式规则应用于元素属性 id=“para1”:

#para1
{text-align:center;color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>#para1{text-align:center;color:red;} </style></head><body><p id="para1">Hello World!</p><p>这个段落不受该样式的影响。</p></body>
</html>

3 class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class可以在多个元素中使用。

语法： .class { /* 样式 */ }

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>p.center{text-align:center;}</style></head><body><h1 class="center">这个标题不受影响</h1><p class="center">这个段落居中对齐。</p> </body>
</html>

4 通用选择器

选择所有 HTML 元素。通用选择器使用 * 符号，选择页面上的所有元素。

语法： * { /* 样式 */ }

以下实例选择了所有元素：

* {background-color: #b0c4de;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鸟教程(runoob.com)</title><style>* {background-color: #b0c4de;}</style></head><body><h1>我的 CSS web 页!</h1><p>你好世界！这是来自 runoob 菜鸟教程的实例。</p></body>
</html>

5 子元素选择器

子元素选择器使用大于号 >，它会选中直接位于父元素内部的子元素。它只选择第一层级的子元素，不包括更深层级的后代元素。

语法： parent > child { /* 样式 */ }

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div>p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><h2>My name is Donald</h2><p>I live in Duckburg.</p></div><div><span><p>I will not be styled.</p></span></div><p>My best friend is Mickey.</p></body>
</html>

6 后代选择器

后代选择器使用空格，它会选中位于父元素内部的所有后代元素，无论层级有多深。这包括子元素、孙子元素、曾孙子元素等。

语法： ancestor descendant { /* 样式 */ }

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div p{background-color:yellow;}</style></head><body><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body>
</html>

7 相邻兄弟选择器

相邻兄弟选择器使用加号 +，它会选中紧跟在指定元素后面的第一个同级元素。这两个元素必须拥有同一个父元素，并且选择器中的第二个元素必须紧跟在第一个元素之后。

语法： element1 + element2 { /* 样式 */ }

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素：

div+p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div+p{background-color:yellow;}</style></head><body><h1>文章标题</h1><div><h2>DIV 内部标题</h2><p>DIV 内部段落。</p></div><p>DIV 之后的第一个 P 元素。</p><p>DIV 之后的第二个 P 元素。</p></body>
</html>

8 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>:

div~p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div~p{background-color:yellow;}</style></head><body><p>之前段落，不会添加背景颜色。</p><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body>
</html>

9 伪类选择器

CSS伪类用于选择处于特定状态或位置的元素，而不是基于它们的名称、ID 或类名。伪类以冒号 : 开头。它们常用于用户交互，如鼠标悬停、链接访问状态等。

语法： selector:pseudo-class { /* 样式 */ }

CSS类也可以使用伪类：

selector.class:pseudo-class { /* 样式 */ }

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>a:link {color:#000000;}      /* 未访问链接*/a:visited {color:#00FF00;}  /* 已访问链接 */a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */</style></head><body><p><b><a href="/css/" target="_blank">这是一个链接</a></b></p><p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p><p><b>注意：</b> a:active 必须在 a:hover 之后。</p></body>
</html>

注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

**注意：**伪类的名称不区分大小写。

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{color:blue;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>p:first-child i{color:blue;} </style></head><body><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p></body>
</html>

10 伪元素选择器

CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。

伪元素用于创建并样式化虚拟元素，这些元素在 HTML 文档中并不实际存在。伪元素以双冒号 :: 开头。

语法： selector::pseudo-element { /* 样式 */ }

CSS 类也可以使用伪元素：

selector.class::pseudo-element { /* 样式 */ }

常用的 CSS 伪元素有 ::before、::after、::first-line、::first-letter 等。

::before/::after 伪元素可以在元素的内容前面/后面插入新内容。

下面的例子在每个 <h1> 元素前面插入内容 "Before: "：

h1::before 
{content:"Before: ";
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鸟教程(runoob.com)</title><style>h1::before {content: "Before";}</style></head><body><h1>This is a heading</h1><p>The :before pseudo-element inserts content before an element.</p><h1>This is a heading</h1><p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p></body>
</html>

11 属性选择器

CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。

属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。

11.1 `[attribute]`

选择带有指定属性的所有元素（无论属性值是什么）。

/* 选择所有具有 `type` 属性的元素 */
[type] {border: 1px solid red;
}

下面的例子是把包含标题（title）的所有元素变为蓝色：

<!DOCTYPE html>
<html><head><style>[title]{color:blue;}</style></head><body><h2>Will apply to:</h2><h1 title="Hello world">Hello world</h1><a title="runoob.com" href="https://www.runoob.com/">runoob.com</a><hr><h2>Will not apply to:</h2><p>Hello!</p></body>
</html>

11.2 `[attribute="value"]`

选择具有指定属性和值完全匹配的元素。

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {background-color: yellow;
}

下面的实例改变了标题 title=‘runoob’ 元素的边框样式:

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>  <style>[title=runoob]{border:5px solid green;}</style></head><body><h2>将适用:</h2><img title="runoob" src="logo.png" width="270" height="50" /><br><a title="runoob" href="https://www.runoob.com/">runoob</a><hr><h2>将不适用:</h2><p title="greeting">Hi!</p><a class="runoob" href="https://www.runoob.com/">runoob</a></body>
</html>

11.3 `[attribute~="value"]`与`[attribute*="value"]`

[attribute~="value"] 选择属性值中包含指定的独立单词 value（用空格分隔的词列表之一）的元素。
```
/* 选择属性值中包含单词 `button` 的元素 */
[class~="button"] {font-weight: bold;
}
```

[attribute*="value"] 选择属性值中包含指定值的元素，不要求是独立单词。

/* 选择所有 `title` 属性中连续包含 `tutorial` 的元素 */
[title*="tutorial"] {font-style: italic;
}

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>  <style>[title*=hello]{color:red;} [title~=hello]{color:blue;} </style></head><body><h2>~=:</h2><h1 title="hello world">Hello world</h1><p title="student hello">Hello CSS students!</p><hr><h2>*=:</h2><p title="student-hello">Hi CSS students!</p></body>
</html>

11.4 `[attribute|="value"]`与`[attribute^="value"]`

[attribute|="value"]：选择完整且唯一的单词 value，或者以 value- 分隔开，常用于语言代码。
```
/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {color: green;
}
```

[attribute^="value"]：选择属性值以指定值开头的元素，不要求是独立单词。

/* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {text-decoration: none;
}

11.5 `[attribute$="value"]`

选择属性值以指定值结尾的元素，不要求是独立单词。

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {border: 2px solid blue;
}