在 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 选择属于其父元素的同类型子元素中的最后一个。