选择器是什么？

h1 {
    color: teal;
    background-color: pink;
}
p {
    color: green;
}

上面代码中的 h1 与 p 就是选择器，它告诉浏览器将样式分别作用到 h1 元素与 p 元素上。

基本选择器

元素选择器

类选择器

类选择器需要在元素的 class 属性中定义类名，接着在样式中以 .类名 { 样式 } 的语法来定义样式。

以下例子元素的 class 为 title ，通过 .title 选择器修改了元素的颜色。

需要注意的是， class 属性值是一个以空格分隔的列表项，这意味着一个元素可以同时定义几个类名。

以下例子中分别用 .title 和 .name 修改了元素的颜色和背景色。

ID 选择器

首先在元素的 id 属性中定义值 id值，接着在样式中以 #id值 { 样式 } 的语法来定义样式。

属性选择器

CSS 的属性选择器可以根据属性名或值来灵活地匹配元素。

语法	描述
[attr]	选择有 attr 属性的元素。
[attr=value]	选择有 attr 属性，且值为 value 的元素。ID 选择器 #id值等价于 [id=id值] 。
[attr~=value]	选择有 attr 属性，且值为以空格分隔，至少一个值为 value。类选择器 .类名等价于 [class~=类名]
[attr\|=value]	选择有 attr 属性，且值为 value 或以 value- 为前缀。
[attr^=value]	选择有 attr 属性，且值为 value 开头的元素。
[attr$=value]	选择有 attr 属性，且值为 value 结尾的元素。
[attr*=value]	选择有 attr 属性，且值包含 value 的元素。
[attr operator value i]	添加字母 i 或 I 表示属性值忽略大小写。例如： [class="title" i] 。
[attr operator value s]	添加字母 s 或 S 表示属性值区分大小写。例如： [class="title" s] 。

选择器列表

可以使用 , 分隔选择器列表，使得列表内的所有选择器同时作用一个样式。

下例中 #head 、 .title 、 .name 三个选择器都应用了样式 color: teal; 。

组合选择器

在基本的选择器，都是根据元素自身的属性进行选择。而在组合选择器是中根据元素与其周围元素的关系进行选择。

后代选择器

语法： A B {样式}

后代选择器选择的是祖先元素为 A 的 B 元素。

下例中只有 .container 的子元素 .title 被选中了，修改了颜色，而单独的 .title 元素并没有被修改。

子选择器

语法： A > B {样式}

子选择器选择的是父元素为 A 的 B 元素。

$$tip

子选择器与后代选择器不同的是，后代选择器只要是后代的元素就可以，而子选择器必须是第一级的子元素。

一般兄弟选择器

语法： A ~ B { 样式 }

一般兄弟选择器选择的是所有与 A 同级的，所有在 A 之后的 B 元素。

下例中选择了所有在 .third 之后的 p 元素：

紧邻兄弟选择器

语法： A + B { 样式 }

紧邻兄弟选择器选择的是与 A 同级的，紧跟在 A 之后的 B 元素。

下例中选择了紧邻在 .third 之后的 <p> 元素：

伪选择器

伪类选择器

伪类用以修改元素特殊状态下的样式，伪类选择器以 : 开头。

以下例子中 h1:hover 表示选中鼠标悬停之上的 <h1> 元素。

常用的伪类选择器

选择器	描述
:active	在用户激活（例如长按）元素的时候匹配。
:blank	匹配空输入值的 input 元素。
:checked	匹配处于选中状态的单选或者复选框。
:disabled	匹配处于禁用状态的元素。
:focus	当一个元素有焦点的时候匹配。
:hover	当用户悬浮到一个元素之上的时候匹配。
:link	匹配未曾访问的链接。
:root	匹配文档的根元素。
:visited	匹配已访问链接。
:first-child	匹配兄弟元素中的第一个元素。
:last-child	匹配兄弟元素中的最后一个元素。

$$tip

更多伪类选择器建议参考完整的 MDN 伪类选择器列表。

伪元素选择器

伪元素允许我们对被选择元素的特定部分进行修改，伪元素选择器以 :: 开头。

常用的伪元素选择器

选择器	描述
::after	匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before	匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter	匹配元素的第一个字母。
::first-line	匹配包含此伪元素的元素的第一行。
::selection	匹配文档中被选择的那部分。

$$tip

更多伪元素选择器建议参考完整的 MDN 伪元素选择器列表与伪元素索引。

多个选择器约束

如果将多个选择器写在一起，匹配的元素必须同时满足多个选择器的约束条件。

例：

p.title：选中元素类型为 p 且 class="title" 的元素
span#line.head：选中元素类型为 span 且 id="line" 且 class="head" 的元素
div#idx[class="box"]：选中元素类型为 div 且 id="idx" 且 class="box” 的元素

练习

1.根据描述写出下列的选择器。

1. 选择所有的 <span> 元素
2. 选择 class="name" 的元素
3. 选择 id="title" 的元素
4. 同时选择所有的  <p> 元素和 <span> 元素
5. 选择 class="head" 元素下的所有 class="link" 的元素
6. 选择紧邻 class="link" 元素之后的 <a> 元素

$$answer

1. span
2. .name
3. #title
4. p, span
5. .head .link
6. .link + a

2.实现以下效果，鼠标移动到文本上时文本变大。

$$demo

<p>三眼鸭的编程教室</p> <style> p{

height: 48px;

line-height: 48px;

} p:hover { font-size: 36px; } </style>

$$answer

<p>三眼鸭的编程教室</p>
<style>
    p:hover {
        font-size: 36px;
    }
</style>

3.实现以下效果。

$$demo

<p>三眼鸭的编程教室</p>

<style>

p::first-letter {

font-size: 26px;

font-weight: bold;

color: teal;

}

</style>

$$answer

<p>三眼鸭的编程教室</p>

<style>
    p::first-letter {
        font-size: 26px;

        font-weight: bold;

        color: teal;
    }
</style>