伪类<:>和伪元素 <::>(CSS)

伪类和伪元素是CSS中用于选择和样式化特定部分或状态的元素。它们允许开发者在不改变HTML结构的情况下，对文档的特定部分应用样式。

伪类（Pseudo-classes）

伪类用于选择元素的特定状态或位置。它们以冒号（:）开头。

常见伪类：

1. :hover - 当用户将鼠标悬停在元素上时应用样式。
2. :active - 当元素被激活（如点击）时应用样式。
3. :focus - 当元素获得焦点时（如表单输入）应用样式。
4. 选择子元素 (在一个元素的子元素中按照顺序选择目标元素)
   • :nth-child(n) - 选择父元素的 [第n个子元素]。
   • :first-child - 选择父元素的 [第一个子元素]。
   • :last-child - 选择父元素的最后一个子元素。
5. :not(selector) - 选择不符合指定选择器的元素。

   div:not(.special) {
       border: 1px solid black;
   }
   

伪元素（Pseudo-elements）

伪元素用于选择元素的特定部分，而不是整个元素。它们以双冒号（::）开头。

常见伪元素：

1. ::before - 在元素内容之前插入内容。

   p::before {
       content: "Note: ";
       font-weight: bold;
   }
   

2. ::after - 在元素内容之后插入内容。

   p::after {
       content: " (Read more)";
       color: blue;
   }
   

3. ::first-line - 选择元素的第一行文本。

   p::first-line {
       font-size: 1.2em;
   }
   

4. ::first-letter - 选择元素的第一个字母。

   p::first-letter {
       font-size: 2em;
       color: red;
   }
   

5. ::selection - 选择用户选中的文本部分。

   ::selection {
       background-color: yellow;
       color: black;
   }
   

区别

• 伪类用于选择元素的特定状态或位置。
• 伪元素用于选择元素的特定部分，并可以在该部分插入内容或应用样式。