css3中的选择器

CSS中的选择器是用来指定你想要样式化的HTML元素的规则。能够精确地控制页面上元素的外观。以下是一些主要的选择器类型及其用途：

1. 元素类型选择器（Type Selector）
   如 p, div, h1 等，直接选择页面中对应类型的元素。

2. 类选择器（Class Selector）
   以.开头，如 .example，选择具有指定类名的元素。

3. ID选择器（ID Selector）
   以#开头，如 #uniqueID，选择具有特定ID属性的元素。每个ID在一个文档中应该是唯一的。

4. 属性选择器（Attribute Selector）
   用于选择带有特定属性或属性值的元素，如 [type="text"] 选择所有type属性为"text"的input元素。

5. 伪类选择器（Pseudo-class Selector）
   用于选择元素的特定状态，如 :hover, :active, :first-child, :nth-of-type(2) 等。

6. 后代选择器（Descendant Selector）
   使用空格分隔，如 .container p，选择所有.container内的<p>元素，不论嵌套层次。

7. 子选择器（Child Selector）
   使用>分隔，如 .parent > .child，仅选择直接作为.parent子元素的.child。

8. 相邻兄弟选择器（Adjacent Sibling Selector）
   使用+分隔，如 h1 + p，选择紧跟在<h1>元素后的<p>元素。

9. 一般兄弟选择器（General Sibling Combinator）
   使用~分隔，如 h1 ~ p，选择所有在<h1>元素后同级的<p>元素。

10. 伪元素选择器（Pseudo-element Selector）
    如 ::before, ::after，用于插入生成的内容或修饰元素的特定部分。

注意：
其中 伪类选择器（Pseudo-class Selectors） 和 伪元素选择器（Pseudo-element Selectors） 是CSS中两种特殊的选择器，它们用来增强对页面元素的控制，但它们之间有明显的区别：

伪类选择器（Pseudo-class Selectors）

伪类选择器主要用于选择元素基于用户操作或特定状态下的表现形式。它们不创建新的元素，而是影响已存在元素在特定条件下的样式。例如：

• :hover - 当鼠标悬停在元素上时的样式。
• :active - 用户激活（如按下鼠标按钮）元素时的样式。
• :focus - 元素获得焦点时的样式，常用于表单控件。
• :visited - 用户已访问过的链接样式。
• :first-child, :last-child, :nth-child() - 选择特定顺序的子元素。

伪类表现了元素的一种临时状态，这些状态可以随用户的交互行为改变。

伪元素选择器（Pseudo-element Selectors）

伪元素选择器用于创建或修饰元素的某些部分，这些部分在文档树中并不存在，是通过CSS生成的。伪元素可以插入内容或为元素的特定部分设置样式，比如：

• ::before - 在元素内容之前插入内容。
• ::after - 在元素内容之后插入内容。
• ::first-letter - 选择元素的第一个字母。
• ::first-line - 选择元素的第一行。

伪元素实际上是通过CSS“创造”出来的元素片段，它们不改变文档的实际DOM结构，只是影响元素的表现。

冒号使用差异

在早期的CSS规范中，伪类和伪元素都使用单冒号（:）作为前缀。但从CSS3开始，为了明确区分这两者，伪元素采用了双冒号（::）作为前缀，而伪类继续使用单冒号。尽管如此，大多数浏览器仍然兼容单冒号用于伪元素的写法，以保持向后兼容性。