CSS - 深入理解选择器的使用方式

在 CSS 中，选择器用于准确地定位和选择需要应用样式的 HTML 元素。以下是对常见选择器使用方式的详细讲解：

元素选择器：

这是最基本的选择器类型，直接指定 HTML 元素的名称。例如， div  选择器会选择所有的  <div>  元素， span  选择器会选择所有的  <span>  元素。通过元素选择器，可以为特定类型的元素应用统一的样式。

类选择器：

类选择器以  .  开头，后面跟着自定义的类名。类名可以由字母、数字、连字符和下划线组成。在 HTML 中，通过  class  属性将类应用到元素上，例如  <div class="my-class">  。然后在 CSS 中使用  .my-class { /* 样式规则 */ }  来为具有该类的元素设置样式。类选择器的优点是可以将相同的样式应用于多个不同的元素，提高代码的复用性。

ID 选择器：

ID 选择器以  #  开头，后面跟着唯一的 ID 名称。在 HTML 中，通过  id  属性为元素分配 ID，例如  <div id="my-id">  。在 CSS 中使用  #my-id { /* 样式规则 */ }  来设置样式。需要注意的是，在一个 HTML 文档中，每个 ID 应该是唯一的，不能在多个元素上重复使用相同的 ID。

通用选择器：

 *  是通用选择器，它会选择文档中的所有元素。虽然可以使用通用选择器来快速设置一些基本样式，但过度使用可能会影响性能，并且在大多数情况下不是一个最佳实践。

组合选择器：

后代选择器：

通过在两个选择器之间添加空格来表示后代关系。例如， div p  会选择所有在  <div>  元素内部的  <p>  元素，无论  <p>  元素是直接子元素还是更深层次的后代元素。

子选择器：

使用  >  符号来指定直接子元素关系。例如， div > p  只会选择直接作为  <div>  元素子元素的  <p>  元素，而不会选择  <div>  元素内部的嵌套  <p>  元素。

相邻兄弟选择器：

使用  +  符号来选择紧挨着前一个元素的兄弟元素。例如， h1 + p  会选择紧接在  <h1>  元素之后的第一个  <p>  元素。

通用兄弟选择器：

使用  ~  符号来选择前一个元素之后的所有兄弟元素。例如， h1 ~ p  会选择所有在  <h1>  元素之后的  <p>  元素。

属性选择器：

简单属性选择器：

 [attribute]  会选择具有指定属性的元素，无论属性值是什么。例如， [href]  会选择所有具有  href  属性的元素。

具体属性值选择器：

 [attribute="value"]  会选择具有指定属性且属性值完全匹配的元素。例如， [href="https://www.example.com"]  会选择  href  属性值为  https://www.example.com  的元素。

部分属性值匹配选择器：

还可以使用  ^  （以指定值开头）、 $  （以指定值结尾）、 *  （包含指定值）来进行部分匹配。例如， [href^="https"]  会选择  href  属性值以  https  开头的元素， [href$=".com"]  会选择  href  属性值以  .com  结尾的元素， [href*="example"]  会选择  href  属性值包含  example  的元素。

伪类选择器：

链接伪类：

-  :link  用于选择未被访问过的链接。

-  :visited  用于选择已被访问过的链接。但由于隐私原因，对于  :visited  伪类，只能设置颜色相关的样式。

用户行为伪类：

-  :hover  用于当鼠标指针悬停在元素上时。

-  :active  用于当元素被激活（如鼠标按下）时。

-  :focus  用于当元素获得焦点时，常见于表单元素如输入框、按钮等。

结构伪类：

-  :first-child  选择父元素的第一个子元素。

-  :last-child  选择父元素的最后一个子元素。

-  :nth-child(n)  可以根据参数  n  的值选择父元素的特定子元素。 n  可以是具体的数字、表达式（如  2n  表示偶数位置的子元素， 2n + 1  表示奇数位置的子元素）或关键字（如  even  表示偶数位置， odd  表示奇数位置）。

-  :first-of-type  选择属于其父元素的同类型子元素中的第一个。

-  :last-of-type  选择属于其父元素的同类型子元素中的最后一个。