CSS 选择器有几种？有什么区别？

1. 元素选择器：

   • 语法：通过元素名称选择元素，如 p 选择所有段落元素。
   • 示例：p { color: red; }
   • 区别：它选择指定名称的所有元素。

2. 类选择器：

   • 语法：通过类名选择元素，类名前加.，如 .btn 选择所有具有 btn 类的元素。
   • 示例：.btn { background-color: blue; }
   • 区别：它选择具有指定类的所有元素，一个元素可以有多个类。

3. ID选择器：

   • 语法：通过元素的唯一ID选择元素，ID前加#，如 #header 选择具有 header ID 的元素。
   • 示例：#header { font-size: 18px; }
   • 区别：它选择具有指定ID的唯一元素，每个ID在文档中应该是唯一的。

4. 后代选择器：

   • 语法：通过元素之间的嵌套关系选择元素，如 ul li 选择所有嵌套在 <ul> 元素内的 <li> 元素。
   • 示例：ul li { list-style-type: square; }
   • 区别：它选择所有满足指定嵌套关系的元素。

5. 子元素选择器：

   • 语法：通过父元素和子元素之间的关系选择元素，使用 >，如 ul > li 选择所有作为 <ul> 直接子元素的 <li> 元素。
   • 示例：ul > li { font-weight: bold; }
   • 区别：它选择满足指定父子关系的元素，不包括孙子元素。

6. 通配选择器：

   • 语法：使用*选择所有元素，如 * 选择页面中的所有元素。
   • 示例：* { margin: 0; padding: 0; }
   • 区别：它选择所有元素，通常用于重置默认样式。

7. 伪类选择器：

   • 语法：通过元素的状态或位置选择元素，如 :hover 选择鼠标悬停的元素。
   • 示例：a:hover { text-decoration: underline; }
   • 区别：它选择满足特定条件的元素，通常用于创建交互效果。

8. 伪元素选择器：

   • 语法：通过元素的虚拟部分选择元素，如 ::before 选择元素前面的虚拟元素。
   • 示例：p::before { content: "➤"; }
   • 区别：它选择元素的虚拟部分，通常用于创建装饰性效果。

这些是一些常见的CSS选择器，它们允许您以不同的方式选择和样式化HTML元素，以实现所需的页面布局和外观。选择正确的选择器是CSS样式表设计的关键部分，可以根据文档结构和样式需求来选择适当的选择器。