如何正确使用CSS选择器

CSS（Cascading Style Sheets）选择器是一种用于选择HTML元素并为其应用样式的重要工具。正确使用CSS选择器可以使我们的网页样式更加精确和灵活。下面将详细介绍如何正确使用CSS选择器，并提供具体的代码示例。

一、基本选择器

p {
  color: red;
}

类选择器：通过选择HTML元素的类名来应用样式。类选择器以英文句点（.）开头，后面跟着类名。例如，要为所有类名为“intro”的元素设置背景颜色为**：

.intro {
  background-color: yellow;
}

ID选择器：通过选择HTML元素的ID来应用样式。ID选择器以井号（#）开头，后面跟着ID名。例如，要为ID名为“logo”的元素设置宽度为200像素：

#logo {
  width: 200px;
}

二、组合选择器

article > p {
  font-size: 14px;
}

后代选择器（descendant selector）：通过选择元素的后代元素来应用样式。后代选择器使用空格。例如，要为所有父级元素class为”section”下的p元素设置字体颜色为绿色：

.section p {
  color: green;
}

相邻兄弟选择器（adjacent sibling selector）：通过选择与元素相邻的兄弟元素来应用样式。相邻兄弟选择器使用加号（+）。例如，要为所有ID为”header”之后出现的p元素设置字体粗体：

#header + p {
  font-weight: bold;
}

通用兄弟选择器（general sibling selector）：通过选择与元素为兄弟关系的所有元素来应用样式。通用兄弟选择器使用波浪号（~）。例如，要为所有ID为”sidebar”之后出现的div元素设置边框为1像素实线：

#sidebar ~ div {
  border: 1px solid;
}

三、属性选择器

a[href] {
  text-decoration: underline;
}

[attribute=value]属性选择器：通过选择具有指定属性和属性值的元素来应用样式。例如，要为所有a元素的target属性值为”_blank”的元素设置字体颜色为蓝色：

a[target="_blank"] {
  color: blue;
}

[attribute^=value]属性选择器：通过选择具有以指定值开头的属性值的元素来应用样式。例如，要为所有href属性值以”http”开头的a元素设置字体颜色为红色：

a[href^="http"] {
  color: red;
}

四、伪类选择器

伪类选择器可以选择元素的特殊状态或位置。常见的伪类选择器有:hover、:active、:focus等，用于选择鼠标悬停、被激活、获取焦点等状态的元素。以下是一些常见的伪类选择器示例：

a:hover {
  color: purple;
}

:nth-child(n)伪类选择器：选择元素的第n个子元素。例如，要为列表中偶数行的元素设置背景颜色：

li:nth-child(even) {
  background-color: lightgray;
}