What are the hierarchical selectors?

The hierarchical selector is a commonly used selector in CSS, which can select based on the relationship between elements. The following are several commonly used hierarchical selectors and code examples:

1. Descendant Selector:

The descendant selector is used to select all descendants within the specified element. element. The syntax is: ancestor descendant.

Example:

<style>
    /* 选择所有 <div> 元素内的 <p> 元素 */
    div p {
        color: blue;
    }
</style>
<div>
    <p>这是一个段落。</p>     <!-- 被选择 -->
    <span>
        <p>这是另一个段落。</p>  <!-- 被选择 -->
    </span>
</div>
<p>这是一个独立的段落。</p>    <!-- 不被选择 -->

2. Child Selector:

The child selector is used to select the direct child elements of the specified element. The syntax is: parent > child.

Example:

<style>
    /* 选择父元素为 <div> 的直接子元素 <p> */
    div > p {
        color: red;
    }
</style>
<div>
    <p>这是一个段落。</p>       <!-- 被选择 -->
    <span>
        <p>这是另一个段落。</p>  <!-- 不被选择 -->
    </span>
</div>

3. Sibling Selector (Adjacent Sibling Selector):

The sibling selector is used to select the next sibling element of the specified element. Its syntax is: element sibling.

Example:

<style>
    /* 选择 <p> 元素下一个兄弟元素 <span> */
    p + span {
        color: green;
    }
</style>
<p>这是一个段落。</p>
<span>这是一个<span>元素。</span></span>  <!-- 被选择 -->
<span>这是另一个<span>元素。</span></span>  <!-- 不被选择 -->

4. General Sibling Selector:

The adjacent sibling selector is used to select everything after the specified element Bro elements. Its syntax is: element ~ sibling.

Example:

<style>
    /* 选择 <p> 元素后的所有兄弟元素 <span> */
    p ~ span {
        font-weight: bold;
    }
</style>
<p>这是一个段落。</p>
<span>这是一个<span>元素。</span></span>      <!-- 被选择 -->
<div>这是一个<div>元素。</div></div>          <!-- 被选择 -->
<span>这是另一个<span>元素。</span></span>    <!-- 被选择 -->

Hierarchical selectors are very useful in CSS, allowing for flexible style selection based on the relationship between elements. The above are several common hierarchical selectors and their code examples. I hope they will be helpful to you.

The above is the detailed content of What are the hierarchical selectors?. For more information, please follow other related articles on the PHP Chinese website!