CSS 选择器列表

CSS 选择器是指定如何选择要样式化的 HTML 元素的模式。CSS 选择器列表提供了一种有效的方式来选择 HTML 元素。在这篇文章中，我们将提供一个 CSS 选择器列表，以及它们的使用示例。

1. 标签选择器

标签选择器是最基本的 CSS 选择器，它使用 HTML 标签名称作为选择器。

/* 例子 */
h1 {
  color: red;
}

2. ID 选择器

ID 选择器使用 HTML 元素的 ID 属性来选择元素。

/* 例子 */
#header {
  background-color: black;
  color: white;
}

3. 类选择器

类选择器使用 HTML 元素的 class 属性来选择元素。

/* 例子 */
.my-class {
  font-size: 18px;
  color: green;
}

4. 属性选择器

属性选择器使用 HTML 元素的属性来选择元素。

/* 例子 */
input[type="checkbox"] {
  margin-right: 10px;
}

5. 后代选择器

后代选择器是指选择所有后代元素的 CSS 规则。

/* 例子 */
div p {
  font-size: 20px;
  color: blue;
}

6. 子元素选择器

子元素选择器是指选择所有子元素的 CSS 规则。

/* 例子 */
div > p {
  font-size: 20px;
  color: blue;
}

7. 相邻兄弟选择器

相邻兄弟选择器是指选择位于同一级别且在当前元素后面的元素。

/* 例子 */
h1 + p {
  font-size: 20px;
}

8. 通用选择器

通用选择器可以匹配任何 HTML 元素。

/* 例子 */
* {
  margin: 0;
  padding: 0;
}

9. 伪类选择器

伪类选择器可以选择元素的状态而不是元素自身。

/* 例子 */
/* 所有未访问的链接 */
a:link {
  color: blue;
}

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

/* 鼠标移动到链接上 */
a:hover {
  color: red;
}

结论

这些是常用的 CSS 选择器列表。学习和理解这些选择器可以帮助开发人员更好地编写 CSS 样式。