选择器是什么?

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

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

基本选择器

元素选择器

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyMWBp?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

类选择器

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/mdqEWov?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/MWOepdb?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

ID 选择器

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/WNXxjeQ?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

属性选择器

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;

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/jOarLpE?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

组合选择器

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

后代选择器

语法: A B {样式}

后代选择器选择的是祖先元素AB 元素。

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/QWOEMzw?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

子选择器

语法: A > B {样式}

子选择器选择的是父元素AB 元素。

$$tip

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

$$

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/vYWKJMQ?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

一般兄弟选择器

语法: A ~ B { 样式 }

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyxPNo?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

紧邻兄弟选择器

语法: A + B { 样式 }

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/rNYZByo?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

伪选择器

伪类选择器

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyBLpQ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

常用的伪类选择器

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

$$tip

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

$$

伪元素选择器

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/YzEjmgK?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

常用的伪元素选择器

选择器 描述
::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” 的元素

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/PoOXxNz?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

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>

$$