Understanding Compound Selectors

CSS selectors can be categorized into basic and compound selectors. Compuond selectors are built upon basic selectors, combining them to create more specific targeting rules.

• Compound selectors provide precise and efficient element targeting
• They combine two or more basic selectors using different methods
• Common compound selectors include: descendant selectors, child selectors, group selectors, and pseudo-class selectors

Descendant Selectors

Descendant selectors, also known as包含选择器, target nested elements within parent elements. The syntax places the outer element first, followed by the inner element, separated by a space. When elements are nested, the inner element becomes a descendant of the outer one.

Syntax:

ancestor descendant {
  style declarations
}

This syntax selects all descendant elements within the ancestor element. For example:

nav ul li {
  /* Targets all li elements within ul in nav */
  color: #333;
}

• Elements are separated by a space
• The first element is the ancestor, the second is the descendant
• The descendant can be a direct child or any nested level
• Both elements can be any basic selector type

Child Selectors

Child selectors target only immediate child elements of a parent element. They select direct descendants, ignoring deeper nested elements.

Syntax:

parent > child {
  style declarations
}

This syntax selects only direct children of the parent element. For example:

section > p {
  /* Targets only p elements that are direct children of section */
  margin: 1em 0;
}

• Elements are separated by the greater-than symbol (>)
• The child must be an immediate descendant, not grandchildren or deeper
• This is often called the direct child selector

Group Selectors

Group selectors allow targeting multiple elements simultaneously to apply the same styles. They're useful for collective styling declarations.

Syntax:

selector1, selector2, selector3 {
  style declarations
}

This syntax selects all specified elements. For example:

h1, h2, h3 {
  /* Applies styles to all heading levels 1-3 */
  font-weight: 600;
}

• Selectors are separated by commas
• The comma acts as a "or" operator
• Any selector type can be part of a group selector
• Useful for reducing code repetition

Pseudo-Class Selectors

Pseudo-class selectors add special effects to elements, such as hover states or positioning. They're identified by a colon (:) prefix, like :hover or :first-child. Common pseudo-classes include link states and structural positioning.

Link Pseudo-Classes:

a:link     /* Unvisited links */
a:visited  /* Visited links */
a:hover    /* Links when mouse is over */
a:active   /* Links when being clicked */

Important Notes:

1. Follow the LVHA order: :link → :visited → :hover → :active
2. Memory aid: "love hate" or "lv hao"
3. Links have browser default styles that often need to be overridden

:focus Pseudo-Class

The :focus pseudo-class targets form elements that have received keyboard or mouse focus. It's primarily used with input elements and other interactive form controls.

input:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
}

textarea:focus,
select:focus {
  /* Applies to multiple focusable elements */
  background-color: #f8f9fa;
}

Compound Selector Reference