CSS 选择器基础指南

CSS 选择器是网页样式表中用来指定元素样式的工具。在本指南中，我们将介绍 CSS 选择器的基础知识，帮助您更好地理解和使用它们。

基本选择器

CSS 中有几种基本的选择器：

• 元素选择器：选择所有指定类型的元素。

  p {
    color: blue;
  }
  

• 类选择器：选择所有具有指定类的元素。

  .class-name {
    color: red;
  }
  

• ID 选择器：选择具有指定 ID 的元素。

  #id-name {
    color: green;
  }
  

属性选择器

属性选择器允许您基于元素的属性进行选择。

• 包含属性：选择具有指定属性值的元素，不论属性值是什么。

  [type="text"] {
    background-color: lightgrey;
  }
  

• 属性值选择器：选择具有特定属性值的元素。

  [type="password"] {
    font-size: 14px;
  }
  

伪类选择器

伪类选择器用于选择具有特定状态或行为的元素。

• 链接伪类：选择链接的不同状态，如链接、鼠标悬停、访问过等。

  a:link {
    color: blue;
  }
  a:visited {
    color: purple;
  }
  a:hover {
    color: red;
  }
  a:active {
    color: orange;
  }
  

嵌套选择器

嵌套选择器用于选择嵌套在特定元素内的元素。

• 子选择器：选择直接子元素。

  .parent > .child {
    background-color: lightblue;
  }
  

• 后代选择器：选择所有后代元素。

  .parent .child {
    background-color: lightgreen;
  }
  

图片示例

以下是一个使用属性选择器的示例。

通过以上内容，您应该对 CSS 选择器有了基本的了解。如果您想了解更多关于 CSS 选择器的信息，请访问本站 CSS 选择器深入指南。