The Difference and Application of CSS Pseudo-classes and Pseudo-elements

I. Basic Concepts
Pseudo-classes and Pseudo-elements are both extensions of CSS selectors, but their purposes and syntax are fundamentally different.

II. Detailed Analysis of Pseudo-classes

1. Definition
   Pseudo-classes are used to select elements in a specific state (such as hover, focus, first child, etc.). They are based on the state of existing elements in the document tree.

2. Syntax Features
   Use a single colon : (the CSS3 specification allows pseudo-classes to use either a single or double colon, but a single colon is typically used for compatibility).

3. Common Pseudo-class Examples

   • Dynamic Interaction: :hover (hover), :active (active), :focus (focus)
   • Structural Relationship: :first-child (first child), :nth-child(n) (nth child)
   • Form-related: :checked (checked state), :disabled (disabled state)

4. Code Demonstration

   /* Change link color to red on hover */
   a:hover { color: red; }
   
   /* Background color for odd table rows */
   tr:nth-child(odd) { background: #f0f0f0; }
   

III. Detailed Analysis of Pseudo-elements

1. Definition
   Pseudo-elements are used to create abstract elements that are not in the document tree (such as the first letter, decorative content before/after). They act as inserting virtual elements based on the original element.

2. Syntax Evolution
   The CSS3 specification clearly states that pseudo-elements should use a double colon :: (e.g., ::before), but the earlier single-colon notation is still supported by browsers for compatibility.

3. Common Pseudo-element Examples

   • ::before/::after: Insert content before/after the element's content
   • ::first-letter: Select the first letter
   • ::selection: Select the portion highlighted by the user

4. Code Demonstration

   /* Add a decorative line before paragraphs */
   p::before {
     content: "→";
     margin-right: 5px;
   }
   
   /* Drop cap effect */
   p::first-letter {
     font-size: 2em;
     float: left;
   }
   

IV. Core Differences Comparison

1. Fundamental Difference

   • Pseudo-classes select existing elements in a specific state.
   • Pseudo-elements create and select non-existent virtual elements.

2. Syntax Standard

   • Pseudo-classes are recommended to use :.
   • Pseudo-elements are recommended to use ::.

3. DOM Structure Representation

   • Pseudo-classes do not affect the DOM structure.
   • Pseudo-elements can be seen in developer tools (but are not in the HTML source code).

V. Comprehensive Application Example

/* Add custom numbering to each list item */
li::before {
  content: counter(list) ".";
  counter-increment: list;
  color: blue;
}

/* Change the number color on hover */
li:hover::before {
  color: red;
}

VI. Common Mistakes and Reminders

1. Pseudo-elements must be used with the content property (except for special cases like ::selection).
2. Pseudo-classes can be chained (e.g., a:hover:focus), while pseudo-elements usually appear only at the end of the selector.
3. Older browsers may not support the double-colon syntax, so the notation should be chosen based on compatibility requirements.