CSS选择器学习攻略

什么是CSS选择器？

在CSS中，选择器是用来选择指定元素的一种方式。它可以根据元素的标签名、类名、ID以及其他属性来选择元素。

CSS选择器分类

CSS选择器可以分为以下几类：

• 标签选择器
• 类选择器
• ID选择器
• 属性选择器
• 后代选择器
• 子元素选择器
• 相邻兄弟选择器
• 后继兄弟选择器
• 伪类选择器
• 伪元素选择器

如何使用CSS选择器？

标签选择器

/* 选择所有 p 元素 */
p {
  color: red;
}

类选择器

/* 选择所有 class 为 red 的元素 */
.red {
  color: red;
}

ID选择器

/* 选择 id 为 header 的元素 */
#header {
  font-size: 24px;
}

属性选择器

/* 选择所有 href 属性值包含 "example" 的 a 元素 */
a[href*="example"] {
  font-weight: bold;
}

后代选择器

/* 选择所有 div 元素下的 p 元素 */
div p {
  font-style: italic;
}

子元素选择器

/* 选择所有 ul 元素下的 li 元素 */
ul > li {
  border: 1px solid black;
}

相邻兄弟选择器

/* 选择紧跟在 h1 元素后的 p 元素 */
h1 + p {
  font-size: 18px;
}

后继兄弟选择器

/* 选择在 h2 元素后同级的 p 元素 */
h2 ~ p {
  font-size: 16px;
}

伪类选择器

/* 选择所有未访问过的 a 元素 */
a:link {
  color: blue;
}

/* 选择所有已访问过的 a 元素 */
a:visited {
  color: purple;
}

/* 选择所有正在 hover 状态下的 a 元素 */
a:hover {
  color: red;
}

/* 选择所有获得焦点的 input 元素 */
input:focus {
  border: 1px dashed black;
}

伪元素选择器

/* 在 p 元素前插入一段内容 */
p::before {
  content: "Today is ";
}

/* 在 p 元素后插入一段内容 */
p::after {
  content: "a good day.";
}

注意事项

• 当使用多个选择器时，它们之间用逗号隔开。
• 当使用多个选择器时，它们之间用空格隔开。
• 具有相同样式的元素应使用类选择器而不是ID选择器，因为ID选择器会降低可重用性。

以上是关于CSS选择器的基本介绍和分类，以及各种选择器的使用方法和示例。希望对你有所帮助！