CSS3选择器入门教程

1. CSS3选择器简介

CSS3选择器是CSS的一部分，用于选择和操作HTML文档中的元素。CSS3扩展了CSS1和CSS2的选择器功能，提供了更多的方式来指定元素样式。

1.1 基本选择器

基本选择器包括标签选择器、类选择器和ID选择器。

/* 标签选择器 */
p {
  color: blue;
}

/* 类选择器 */
.my-class {
  font-size: 16px;
}

/* ID选择器 */
#my-id {
  font-weight: bold;
}

1.2 属性选择器

属性选择器可以根据元素的属性和属性值来选择元素。

/* 属性选择器 */
input[type="text"] {
  border: 1px solid #ccc;
}

1.3 伪类选择器

伪类选择器用于选择处于特定状态的元素。

/* 伪类选择器 */
a:hover {
  color: red;
}

1.4 伪元素选择器

伪元素选择器用于选择和操作文档中的特定部分。

/* 伪元素选择器 */
p::first-letter {
  font-size: 20px;
}

1.5 复合选择器

复合选择器结合了多个选择器来选择元素。

/* 复合选择器 */
li strong {
  color: green;
}

2. 基本选择器

基本选择器是CSS中最常用的选择器，它们是构建样式规则的基础。

2.1 标签选择器

标签选择器直接通过HTML标签名来选择页面上的元素。

/* 选择所有 <p> 标签 */
p {
  color: #333;
  font-size: 16px;
}

2.2 类选择器

类选择器通过HTML元素的class属性来选择元素，允许对具有相同类的元素应用相同的样式。

/* 选择所有具有 class="highlight" 的元素 */
.highlight {
  background-color: #f0f0f0;
  padding: 10px;
}

2.3 ID选择器

ID选择器通过HTML元素的id属性来选择一个唯一的元素。

/* 选择 id="main" 的元素 */
#main {
  border: 1px solid #ddd;
  margin: 20px;
}

2.4 通用选择器

通用选择器*可以匹配页面上的所有元素。

/* 选择页面上的所有元素 */
* {
  margin: 0;
  padding: 0;
}

2.5 伪元素选择器

伪元素选择器允许我们根据元素的特定部分来应用样式，例如首字母或第一行。

/* 选择所有 <p> 标签的第一行 */
p::first-line {
  font-weight: bold;
}

/* 选择所有 <p> 标签的首字母 */
p::first-letter {
  font-size: 20px;
  font-weight: bold;
}

3. 属性选择器

属性选择器允许我们根据元素的属性和属性值来选择和样式化元素。

3.1 简单属性选择器

简单属性选择器匹配具有特定属性的元素。

/* 选择所有具有 'type' 属性的 <input> 元素 */
input[type] {
  border: 1px solid #ccc;
}

3.2 属性值选择器

属性值选择器匹配具有特定属性值的元素。

/* 选择所有 'type' 属性值为 'text' 的 <input> 元素 */
input[type="text"] {
  border: 1px solid #333;
}

/* 选择所有 'class' 属性中包含 'highlight' 的元素 */
div[class~="highlight"] {
  background-color: #f0f0f0;
}

3.3 子串属性值选择器

子串属性值选择器可以匹配部分属性值。

/* 选择所有 'class' 属性值以 'high' 开头的元素 */
div[class^="high"] {
  color: blue;
}

/* 选择所有 'class' 属性值包含 'light' 的元素 */
div[class*="light"] {
  font-style: italic;
}

/* 选择所有 'class' 属性值以 'end' 结尾的元素 */
div[class$="end"] {
  text-decoration: underline;
}

3.4 多属性选择器

多属性选择器可以同时匹配多个属性。

/* 选择所有 'type' 属性值为 'text' 且 'name' 属性值为 'username' 的 <input> 元素 */
input[type="text"][name="username"] {
  background-color: #eee;
}

3.5 属性选择器的组合

属性选择器可以与其他类型的选择器组合使用。

/* 选择所有 class 为 'info' 且在 <div> 元素内的 <p> 标签 */
div p.info {
  font-size: 14px;
}

4. 伪类和伪元素

伪类和伪元素用于选择和操作文档中的特定部分，它们在样式化链接、表单元素以及文档中的其他交互元素时特别有用。

4.1 伪类

伪类用于指定元素在特定状态下的样式。

4.1.1 链接伪类

链接伪类用于不同状态的链接。

/* 未访问链接 */
a:link {
  color: blue;
}

/* 已访问链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停链接 */
a:hover {
  text-decoration: underline;
}

/* 激活链接 */
a:active {
  color: red;
}

4.1.2 表单伪类

表单伪类用于表单元素的特定状态。

/* 获得焦点的输入框 */
input:focus {
  border: 2px solid #009688;
}

/* 被选中的单选按钮或复选框 */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  outline: 2px solid #009688;
}

4.2 伪元素

伪元素用于选择和操作文档中的特定部分，它们不是实际文档中的元素。

4.2.1 第一行伪元素

第一行伪元素用于样式化块级元素的第一行文本。

/* 样式化 <p> 元素的第一行文本 */
p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

4.2.2 首字母伪元素

首字母伪元素用于样式化块级元素的首字母。

/* 样式化 <p> 元素的首字母 */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
}

4.2.3 before 和 after 伪元素

before 和 after 伪元素用于在选定元素的内容之前或之后插入内容。

/* 在 <h1> 元素之前插入内容 */
h1::before {
  content: "Important: ";
}

/* 在 <p> 元素之后插入内容 */
p::after {
  content: " (end of paragraph)";
}

4.3 伪类和伪元素的区别

伪类用于表示元素的动态状态，如鼠标悬停或选中状态，而伪元素用于选择文档中的特定部分，如首字母或第一行文本，或者用于插入内容。

5. 高级选择器

CSS的高级选择器提供了更细粒度的控制，允许开发者针对复杂的文档结构和交互状态应用样式。

5.1 子选择器

子选择器用于选择指定元素的直接子元素。

/* 选择 <div> 元素的直接子 <p> 元素 */
div > p {
  color: green;
}

5.2 相邻兄弟选择器

相邻兄弟选择器用于选择紧跟在另一个元素后面的兄弟元素。

/* 选择紧跟在 <p> 元素后面的 <span> 元素 */
p + span {
  font-weight: bold;
}

5.3 通用兄弟选择器

通用兄弟选择器用于选择指定元素之后的所有兄弟元素。

/* 选择跟在 <p> 元素后面的所有 <span> 兄弟元素 */
p ~ span {
  color: red;
}

5.4 属性选择器的高级使用

属性选择器可以匹配更复杂的属性条件。

/* 选择所有属性 'data-type' 以 'video' 开头的元素 */
[data-type^="video"] {
  border: 2px solid #ff9800;
}

/* 选择所有属性 'data-info' 包含 'private' 的元素 */
[data-info*="private"] {
  visibility: hidden;
}

5.5 伪类和伪元素的高级应用

伪类和伪元素可以用于更复杂的样式化。

/* 选择所有偶数行 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选择所有奇数行 */
tr:nth-child(odd) {
  background-color: #e7e7e7;
}

/* 选择第一个子元素 */
p:first-child {
  font-weight: bold;
}

/* 选择最后一个子元素 */
p:last-child {
  font-style: italic;
}

5.6 组合选择器

组合选择器允许将多个选择器组合在一起，以选择多个元素。

/* 选择 <div> 元素内的所有 <p> 和 <span> 元素 */
div p, div span {
  margin: 10px;
}

/* 选择 <div> 元素内的 <p> 元素以及类为 'highlight' 的元素 */
div p, .highlight {
  padding: 5px;
}

高级选择器的使用可以显著提高样式表的精确度和控制力，但应谨慎使用，以避免过度复杂化和性能问题。

6. 选择器的组合使用

选择器的组合使用可以让我们更精确地定位页面上的元素，并应用特定的样式规则。

6.1 选择器组合规则

选择器可以按照以下规则组合使用：

逗号分隔：用逗号分隔的选择器将样式应用于所有匹配的元素。
空格分隔：空格分隔的选择器表示选择器之间的后代关系。
大于号（>）分隔：大于号表示选择器之间的子代关系。
波浪号（~）分隔：波浪号表示选择器之间的相邻兄弟关系。
加号（+）分隔：加号表示选择器之间的紧邻兄弟关系。

6.2 选择器组合示例

6.2.1 后代选择器

后代选择器用于选择某个元素的所有后代元素。

/* 选择 <div> 元素内的所有 <p> 元素 */
div p {
  color: blue;
}

6.2.2 子选择器

子选择器仅选择指定元素的直接子元素。

/* 选择 <div> 元素的直接子 <p> 元素 */
div > p {
  font-weight: bold;
}

6.2.3 相邻兄弟选择器

相邻兄弟选择器选择紧跟在另一个元素后面的兄弟元素。

/* 选择紧跟在 <div> 元素后面的 <p> 元素 */
div + p {
  text-decoration: underline;
}

6.2.4 通用兄弟选择器

通用兄弟选择器选择指定元素之后的所有兄弟元素。

/* 选择跟在 <div> 元素后面的所有 <p> 兄弟元素 */
div ~ p {
  font-style: italic;
}

6.2.5 组合选择器

组合选择器将多个选择器组合在一起，以选择多个元素。

/* 选择 <div> 元素内的所有 <p> 和 <span> 元素 */
div p, div span {
  margin: 10px;
}

6.2.6 属性选择器与其他选择器的组合

属性选择器可以与其他类型的选择器组合使用。

/* 选择类为 'info' 且在 <div> 元素内的 <p> 标签 */
div p.info {
  background-color: #f9f9f9;
}

通过组合不同的选择器，我们可以创建非常具体和强大的样式规则，以适应复杂的页面结构和样式需求。

7. 选择器的性能考虑

在选择CSS选择器时，除了考虑其功能和便利性，还应考虑其对页面性能的影响。以下是一些关于选择器性能的考虑因素：

7.1 选择器的复杂性

选择器的复杂性会影响浏览器的渲染时间。通常，选择器越复杂，浏览器解析和匹配元素所需的时间就越长。

7.1.1 简化选择器

简化选择器，避免使用过于复杂的组合，可以提升性能。

/* 不推荐：使用过于复杂的后代选择器 */
body div p span {}

/* 推荐：使用更简洁的选择器 */
span {}

7.2 选择器的类型

不同类型的选择器在性能上也有所不同。一般来说，以下选择器的性能顺序从高到低：

ID选择器
类选择器
属性选择器
伪类选择器
伪元素选择器
标签选择器
通用选择器

7.2.1 优化选择器类型

尽可能使用性能更高的选择器。

/* 不推荐：使用标签选择器 */
div {}

/* 推荐：使用类选择器 */
.className {}

7.3 选择器的数量

页面中使用的CSS选择器的数量也会影响性能。过多的选择器会增加浏览器的解析负担。

7.3.1 减少选择器的数量

合并相同的选择器，移除未使用的选择器。

/* 不推荐：重复的选择器 */
.className {}
.className {}

/* 推荐：合并选择器 */
.className, .anotherClass {
  /* shared styles */
}

7.4 避免过度使用后代选择器

后代选择器可能会导致浏览器进行大量的DOM遍历，尤其是当它们选择深层次的元素时。

7.4.1 使用更具体的选择器

尽可能使用更具体的选择器，如子选择器或相邻兄弟选择器。

/* 不推荐：使用后代选择器 */
body .className {}

/* 推荐：使用子选择器 */
body > .className {}

7.5 利用CSS的继承性质

利用CSS的继承性质，避免在多个元素上重复相同的样式。

/* 不推荐：为每个 <li> 设置样式 */
li {
  color: blue;
}

/* 推荐：为父元素设置样式，子元素继承 */
ul {
  color: blue;
}

在编写CSS时，始终要权衡选择器的便利性和性能。在大型项目中，合理的CSS组织和优化可以显著提高页面加载和渲染的速度。

8. 总结与练习

8.1 总结

在本篇博客中，我们详细介绍了CSS选择器的各种类型，包括基本选择器、属性选择器、伪类和伪元素，以及高级选择器的组合使用。我们还讨论了在选择CSS选择器时需要考虑的性能问题，强调了简化选择器、合理使用选择器类型、减少选择器数量、避免过度使用后代选择器以及利用CSS继承性质的重要性。

8.2 练习

以下是一些练习题，以帮助你巩固对CSS选择器的理解：

8.2.1 填空题

在CSS中，用于选择具有特定属性的元素的选择器是__________。
选择器input:focus表示__________。
选择器li:nth-child(even)用于选择__________。

8.2.2 选择题

以下哪个选择器性能最高？ A. #myId B. .myClass C. div p D. *
以下哪个选择器用于选择紧跟在另一个元素后面的兄弟元素？ A. div + p B. div ~ p C. div > p D. div p

8.2.3 编程题

编写CSS选择器，选择所有具有data-tooltip属性的<a>标签。
编写CSS选择器，选择所有类名以note-开头且在<section>元素内的<p>标签。
编写CSS规则，使得所有<h2>元素的首字母字体大小为20px，并且字体加粗。

8.3 练习答案

8.3.1 填空题答案

属性选择器
获得焦点的输入框
偶数行

8.3.2 选择题答案

A. #myId
A. div + p

8.3.3 编程题答案

[data-tooltip]
section p[class^="note-"]

h2::first-letter {
  font-size: 20px;
  font-weight: bold;
}

通过这些练习，你可以加深对CSS选择器的理解，并在实际开发中更有效地应用它们。