文章目录
- 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;
}
