CSS3选择器

选择器是CSS的基础，它们用于指定要应用样式的HTML元素。CSS3为开发人员提供了更多的选择器，以便更准确地选择元素或元素集合。本文将介绍一些常见的CSS3选择器。

一、基本选择器

1. 标签选择器

标签选择器用于选择一个或多个具有特定HTML标签名称的元素。

p {
  color: red;
}

2. 类选择器

类选择器使用点号（.）开头，针对具有相同class名称的元素进行样式控制。

.my-class {
  color: blue;
}

3. ID选择器

ID选择器使用井号（#）开头，针对具有特定ID属性的元素进行样式控制。

#my-id {
  font-size: 16px;
}

二、组合选择器

组合选择器允许根据元素的位置和关系进行选择。

1. 后代选择器

后代选择器允许选择元素的后代（子孙）元素。

ul li {
  list-style-type: none;
}

2. 子元素选择器

子元素选择器（直接子元素选择器）允许选择一个元素的一级子元素。

ul > li {
  border: 1px solid black;
}

3. 相邻兄弟选择器

相邻兄弟选择器（相邻选择器）允许选择在同一级别上具有相邻兄弟关系的元素。

h1 + p {
  font-weight: bold;
}

4. 通用兄弟选择器

通用兄弟选择器允许选择在同一级别上具有兄弟关系的元素（不一定是相邻的兄弟元素）。

h2 ~ p {
  color: green;
}

三、伪类选择器

伪类选择器用于指定元素处于特定状态的样式，如hover、active、visited等状态。

1. :hover 伪类选择器

:hover 伪类选择器用于指定当鼠标悬停在元素上时的样式。

a:hover {
  color: red;
}

2. :focus 伪类选择器

:focus 伪类选择器用于指定元素获得焦点时的样式。

input:focus {
  background-color: yellow;
}

3. :nth-child() 伪类选择器

:nth-child() 伪类选择器可以指定一个元素在其父元素中的位置，并且仅选择符合条件的元素。

ul li:nth-child(odd) {
  background-color: #f0f0f0;
}

四、小结

了解CSS3选择器是Web开发中的基本技能之一。使用它们可以更好地控制HTML文档的外观，使Web页面看起来更不一样。在使用选择器时，我们可以灵活运用各种组合来指定所需的元素，并且尝试使用伪类选择器来获得有趣的效果。