选择器分类
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
简单选择器
CSS 元素选择器
实例
在这里，页面上的所有
元素都将居中对齐，并带有红色文本颜色：
p {
text-align: center;
color: red;
}
CSS id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例
#para1
{
text-align:center;
color:red;
}
注意：
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
CSS 类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点**"."号**显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
实例
p.center {text-align:center;}
注意：HTML 元素也可以引用多个类。
实例
在这个例子中，
元素将根据 class="center" 和 class="large" 进行样式设置：
<p class="center large">这个段落引用两个类。</p>
**注意：**类名不能以数字开头！
CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
实例
下面的 CSS 规则会影响页面上的每个 HTML 元素：
* {
text-align: center;
color: blue;
}
CSS 分组选择器
分组选择器是元素选择器的衍生。
元素选择器：
实例
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
分组选择器，顾名思义就是将元素选择器选择的元素进行分组，上面的代码片段，因为想要三个元素的样式都相同，我们可以用分组选择器来这么写：
实例
h1, h2, p {
text-align: center;
color: red;
}
这样不仅实现了效果更简化了，代码片段。
所有简单的 CSS 选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| .class (类选择器) | .intro { //style} | 选取所有 class="intro" 的元素。 |
| #id (id选择器) | #firstname { //style} | 选取 id="firstname" 的那个元素。 |
| * (通用选择器) | * { //style} | 选取所有元素。 |
| element (元素选择器) | p { //style} | 选取所有 元素。 |
| element*,*element,.. (分组选择器) | iv, p { //style} | 选取所有 元素和所有 元素。 |
CSS 组合器
在 CSS3 中包含了四种组合方式:
•后代选择器(以空格 分隔)
•子元素选择器(以大于 > 号分隔）
•相邻兄弟选择器（以加号 + 分隔）
•普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择
元素内的所有元素：
div p {
background-color: yellow;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>
<div>
<p>div 中的段落 1。</p> //我有效果
<p>div 中的段落 2。</p>//我有效果
<section><p>div 中的段落 3。</p></section>//我有效果
</div>
<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>
</body>
</html>
子选择器
与后代选择器相比，它只能选择作为某元素**
直接/一级子元素**的元素。以下实例选择了
元素中所有直接子元素：
div > p {
background-color: yellow;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
<div>
<p>div 中的段落 1。</p> //我有效果
<p>div 中的段落 2。</p> //我有效果
<section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
<p>div 中的段落 4。</p> //我有效果
</div>
<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>
</body>
</html>
相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”的第一个元素。
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。
以下实例选取了所有位于
元素后的第一个元素:
div + p {
background-color: yellow;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p> //只有我有效果
<p>段落 4。不在 div 中。</p>
</body>
</html>
后续(通用)兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有
元素之后的所有相邻兄弟元素:
div ~ p {
background-color: yellow;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>
<p>段落 1。</p>
<div>
<p>段落 2。</p>
</div>
<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>
</body>
</html>
所有 CSS 组合选择器
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| element element（后代选择器） | div p {//style} | 选择 元素内的所有 元素。 |
| element>element （子选择器） | div > p{//style} | 选择其父元素是 元素的所有 元素。 |
| element*+*element（相邻兄弟选择器） | div + p{//style} | 选择所有紧随 元素之后的 元素。 |
| element1~element2（后续(通用)兄弟选择器） | p ~ ul{//style} | 选择前面有 元素的每个
|
伪类选择器
伪类的语法
selector:pseudo-class {
property: value;
}
CSS类也可以使用伪类：
selector.class:pseudo-class {
property: value;
}
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意：
•在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
•在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
•伪类的名称不区分大小写。
伪类可以与 CSS 类配合使用：
实例
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
如果在上面的例子的链接已被访问，它会显示为红色。
伪类 —— :first-child伪类
使用 :first-child 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明 ，这样 :first-child 才能生效。
匹配作为任何元素的第一个子元素的
元素：
p:first-child
{
color:blue;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>这是一段文本。</p>
<p>这是一段文本。</p>
</body>
</html>
匹配所有
元素中的首个 元素
在下面的例子中，选择器匹配所有
元素中的第一个 元素：被选中的是i标签
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>我是一个<i>`强壮`</i>的男人。我是一个<i>强壮</i>的男人。</p>
<p>我是一个<i>`强壮`</i>的男人。我是一个<i>强壮</i>的男人。</p>
</body>
</html>
匹配所有首个
元素中的所有 元素
在下面的例子中，选择器匹配作为另一个元素的第一个子元素的
元素中的所有 元素：被选中的是p标签
实例
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>我是一个<i>`强壮`</i>的男人。我是一个<i>`强壮`</i>的男人。</p>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
</body>
</html>
CSS - :lang 伪类
:lang伪类允许您为不同的语言定义特殊的规则。在下面的例子中，
:lang为属性为 lang="en" 的元素定义引号：
实例
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
<p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p>
</body>
</html>
结果
Some text~A quote in a paragraph~Some text.
在本例中，:lang 为 lang="en" 的 q 元素定义引号：
所有 CSS 伪类
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 元素。 |
| :empty | p:empty | 选择没有子元素的每个 元素。 |
| :enabled | input:enabled | 选择每个已启用的 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个 元素。 |
| :focus | input:focus | 选择获得焦点的 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 元素。 |
| :lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 元素。 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 元素的每个 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :not(selector) | :not(p) | 选择每个非 元素的元素。 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 元素的每个 元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 元素的每个 元素。 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 元素的每个 元素。 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 元素。 |
| :optional | input:optional | 选择不带 "required" 属性的 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 元素。 |
| :read-only | input:read-only | 选择指定了 "readonly" 属性的 元素。 |
| :read-write | input:read-write | 选择不带 "readonly" 属性的 元素。 |
| :required | input:required | 选择指定了 "required" 属性的 元素。 |
| :root | root | 选择元素的根元素。 |
| :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 |
| :valid | input:valid | 选择所有具有有效值的 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
所有 CSS 伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个 元素之后插入内容。 |
| ::before | p::before | 在每个 元素之前插入内容。 |
| ::first-letter | p::first-letter | 选择每个 元素的首字母。 |
| ::first-line | p::first-line | 选择每个 元素的首行。 |
| ::selection | p::selection | 选择用户选择的元素部分 |
伪元素
什么是伪元素？
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
伪元素的语法：
selector::pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class::pseudo-element {property:value;}
::first-line 伪元素
::first-line伪元素用于向文本的首行添加特殊样式。下面的例子为所有
元素中的首行添加样式：
实例
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
注意：
::first-line伪元素只能应用于块级元素。以下属性适用于
::first-line伪元素：
- 字体属性
- 颜色属性
- 背景属性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
请注意双冒号表示法 -
::first-line对比:first-line在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。
::first-letter 伪元素
::first-letter伪元素用于向文本的首字母添加特殊样式。下面的例子设置所有
元素中文本的首字母格式：
实例
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
伪元素和 CSS 类
伪元素可以与 CSS 类结合使用：
实例
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。
多个伪元素
也可以组合几个伪元素。
在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：
实例
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
CSS - ::before 伪元素
::before伪元素可用于在元素内容之前插入一些内容。下面的例子在每个 <h1> 元素的内容之前插入一幅图像：
实例
h1::before {
content: url(smiley.gif);
}
CSS - ::after 伪元素
::after伪元素可用于在元素内容之后插入一些内容。下面的例子在每个<h1>元素的内容之后插入一幅图像：
实例
h1::after {
content: url(smiley.gif);
}
CSS - ::selection 伪元素
::selection伪元素匹配用户选择的元素部分。以下 CSS 属性可以应用于
::selection：
colorbackgroundcursoroutline下例使所选文本在黄色背景上显示为红色：
实例
::selection {
color: red;
background: yellow;
}
所有 CSS 伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个 元素之后插入内容。 |
| ::before | p::before | 在每个 元素之前插入内容。 |
| ::first-letter | p::first-letter | 选择每个 元素的首字母。 |
| ::first-line | p::first-line | 选择每个 元素的首行。 |
| ::selection | p::selection | 选择用户选择的元素部分。 |
所有 CSS 伪类
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 元素。 |
| :empty | p:empty | 选择没有子元素的每个 元素。 |
| :enabled | input:enabled | 选择每个已启用的 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个 元素。 |
| :focus | input:focus | 选择获得焦点的 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 元素。 |
| :lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 元素。 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 元素的每个 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :not(selector) | :not(p) | 选择每个非 元素的元素。 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 元素的每个 元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 元素的每个 元素。 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 元素的每个 元素。 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 元素。 |
| :optional | input:optional | 选择不带 "required" 属性的 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 元素。 |
| :read-only | input:read-only | 选择指定了 "readonly" 属性的 元素。 |
| :read-write | input:read-write | 选择不带 "readonly" 属性的 元素。 |
| :required | input:required | 选择指定了 "required" 属性的 元素。 |
| :root | root | 选择元素的根元素。 |
| :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 |
| :valid | input:valid | 选择所有具有有效值的 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
属性选择器（CSS3新增）
属性选择器是基于属性来定位一个元素。可以指定该元素的某个属性，这样所有使用该属性的元素都将被定位。
属性选择器有如下五种：(CSS3新增三个)
所有 CSS 属性选择器
| 属性名称 | 含义 |
|---|---|
| [att^=”value”] | 该属性的值以指定的值开始 (新增) |
| [att$=”value”] | 该属性的值以指定的值结束 (新增) |
| [att*=”value”] | 该属性的值包含指定的值，无论其位置 (新增) |
| [att~=”value”] | 该属性的值包含指定的值（value为完整单词） |
| [att|=”value”] | 该属性的值必须为指定的值（或者以 - 分隔开） |
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素。 |
| [attribute^=value] | a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 元素。 |
| [attribute*=value] | a[href*="w3school"] | 选择其 href 属性值包含子串 "w3school" 的每个 元素。 |
CSS [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 元素；
实例
a[target] {
background-color: yellow;
}
CSS [attribute="value"] 选择器
[attribute="value"] 选择器用于选取带有指定属性和值的元素。
下例选取所有带有 target="_blank" 属性的 元素：
实例
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] 选择器
[attribute~="value"] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素：
实例
[title~="flower"] {
border: 5px solid yellow;
}
上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。
CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：
**注释：**值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。
[class|="top"] {
background: yellow;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute|="value"] 选择器</h1>
<h1 class="top-header">Welcome</h1>//有效果
<p class="top-text">Hello world!</p>//有效果
<p class="topcontent">Are you learning CSS?</p>//无效果
</body>
</html>
CSS [attribute^="value"] 选择器
[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：
**提示：**值不必是完整单词！
[class^="top"] {
background: yellow;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute^="value"] 选择器</h1>
<h1 class="top-header">Welcome</h1>//有效果
<p class="top-text">Hello world!</p>//有效果
<p class="topcontent">Are you learning CSS?</p>//有效果
</body>
</html>
CSS [attribute$="value"] 选择器
[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。
下例选取 class 属性以 "test" 结尾的所有元素：
**提示：**值不必是完整单词！
实例
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器选取属性值包含指定词的元素。
下例选取 class 属性包含 "te" 的所有元素：
**提示：**值不必是完整单词！
实例
[class*="te"] {
background: yellow;
}
设置表单样式
若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：
实例
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
