Detailed explanation of CSS descendant selector

Destination selector is used to match all descendant elements of the specified element. The first simple selector in the selector represents the ancestor element—a higher-level element in the structure, such as the parent element, the parent element of the parent element, etc. The second simple selector represents the descendant elements we are trying to match.

The combiner used in descendant selectors is a space character: space, horizontal tab, carriage return, line break or page break. Since space characters are allowed around the combiner, you can include multiple space characters between simple selectors in descendant selectors.

Consider the following HTML snippet:

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul>

We will try to match elements in the above fragment using the following selector:

ul li {
  /* 聲明 */
}

This descendant selector will match all four li elements in the sample HTML, because each li element has a ul element as its ancestor.

We can also use the descendant selector to match the ol element within li in the above example:

ul * li {
  /* 聲明 */
}
ul * * li {
  /* 聲明 */
}
ul * ol li {
  /* 聲明 */
}
ul li * li {
  /* 聲明 */
}
ul ol li {
  /* 聲明 */
}
ul li li {
  /* 聲明 */
}
ul li ol li {
  /* 聲明 */
}

However, we cannot use the descendant selector to match only list items in an unordered list. To do this, we need a sub-selector.

Example

Let's take a look at an example of the actual application of the descendant selector:

ul li {
  /* 聲明 */
}

This selector matches all ul elements that are descendants of li elements—that is, each ul element with li elements as its ancestor.

CSS Descendant Selector FAQ (FAQ)

What is the difference between descendant selector and child selector in CSS?

In CSS, both descendant selectors and sub-selectors are used to select elements based on their relationship with other elements. However, they function differently. The descendant selector selects all elements that are descendants of the specified element. This means it selects all child elements, grandchild elements, great-grandchild elements, etc. On the other hand, the sub-selector only selects direct child elements of the specified element, without selecting any deeper descendants.

How to use descendant selector to style nested elements?

To style nested elements using descendant selector, you need to specify the ancestor element, followed by descendant elements, separated by spaces. For example, if you want to style all paragraph elements that are descended from the div element, you should write "div p { /* 您的樣式在此處 */ }". This will apply the style to all paragraph elements within div no matter how deep they are nested.

Can I use multiple descendant selectors in a single rule?

Yes, you can use multiple descendant selectors in a single rule. This is useful when you want to style elements that are descended from multiple types of elements. For example, "div p, ul li { /* 您的樣式在此處 */ }" will apply the style to paragraph elements within div and list items within an unordered list.

What is the specificity of the offspring selector?

The specificity of the CSS rule is an indicator of its importance. It determines which rule will be applied when there is a conflicting rule. The specificity of the offspring selector is equal to the sum of its composition selector specificities. For example, the specificity of "div p" is 2, because it contains two type selectors.

Can I use pseudo-classes with descendant selectors?

Yes, you can use pseudo-classes with descendant selectors. This allows you to select elements based on the state of the element or where it is in the document. For example, "div p:first-child { /* 您的樣式在此處 */ }" selects the first paragraph element as the div child element.

How does cascade affect descendant selectors?

Castification is a process by which CSS determines the rules to be applied to elements. A later rule or a higher specific rule in the style sheet will cover an earlier or a lower specific rule. This means that if you have rules that conflict with offspring selectors, later or more specific rules will be applied.

Can I use descendant selector with attribute selector?

Yes, you can use descendant selectors with attribute selectors. This allows you to select elements based on the attributes of the element and its position in the document. For example, "div p[class='highlight'] { /* 您的樣式在此處 */ }" will select a paragraph element with a class "highlight" and as a descendant of div.

How to use descendant selector to style tables?

You can use descendant selectors to style the table by selecting table rows, cells, titles, and other elements based on the relationship between table elements and table elements. For example, "table tr:nth-child(even) { /* 您的樣式在此處 */ }" will select each even row in the table.

Can I use descendant selectors with universal selectors?

Yes, you can use descendant selectors with universal selectors. The universal selector matches any element, so it can be used to select all descendants of the specified element. For example, "div * { /* 您的樣式在此處 */ }" will select all elements that are descendants of div.

How to style a form using descendant selector?

You can use descendant selectors to style the form by selecting form elements based on the relationship between form elements and form elements. For example, "form input[type='text'] { /* 您的樣式在此處 */ }" will select all text input fields in the form.

The above is the detailed content of Descendant Selector (CSS Selector). For more information, please follow other related articles on the PHP Chinese website!