学习 CSS 时，掌握基本的 CSS 选择器是非常关键的。这些选择器可以帮助你更精确地定位并样式化网页元素。

常用选择器

以下是一些常用的 CSS 选择器：

  • 元素选择器：选择页面中的所有指定元素。
    p {
  color: red;
}
  • 类选择器：通过类名选择元素。
    .my-class {
  font-size: 16px;
}
  • ID 选择器：通过 ID 选择唯一的元素。
    #my-id {
  background-color: blue;
}
  • 标签选择器：选择所有指定的 HTML 标签。
    a {
  text-decoration: none;
}
  • 后代选择器：选择指定元素的后代元素。
    ul li {
  color: green;
}
  • 子选择器：选择指定元素的直接子元素。
    ul > li {
  font-weight: bold;
}
  • 相邻兄弟选择器：选择紧接指定元素之后的兄弟元素。
    li + li {
  margin-top: 10px;
}
  • 通用兄弟选择器：选择指定元素之后的所有兄弟元素。
    li ~ li {
  margin-top: 5px;
}

实例

假设你有一个 HTML 结构如下：

<ul>
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
</ul>

你可以使用以下 CSS 选择器来应用样式：

ul .list-item {
  background-color: #f0f0f0;
}

ul > li {
  padding: 10px;
}

这将使列表项背景为浅灰色，并且每个列表项都添加了内边距。

学习资源

如果你想要更深入地了解 CSS 选择器，可以参考以下资源：

CSS Selectors

希望这些信息能帮助你更好地理解 CSS 选择器！