계층적 선택자는 무엇입니까?

계층적 선택자는 CSS에서 일반적으로 사용되는 선택자로, 요소 간의 관계를 기반으로 선택할 수 있습니다. 다음은 일반적으로 사용되는 여러 계층적 선택기 및 코드 예제입니다.

1. 하위 항목 선택기:

하위 항목 선택기는 지정된 요소 내의 모든 하위 요소를 선택하는 데 사용됩니다. 구문은 상위 자손입니다. ancestor descendant。

示例：

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

2. 子元素选择器（Child Selector）：

子元素选择器用于选择指定元素的直接子元素。其语法为：parent > child。

示例：

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

3. 兄弟选择器（Adjacent Sibling Selector）：

兄弟选择器用于选择指定元素的下一个兄弟元素。其语法为：element + sibling。

示例：

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

4. 相邻兄弟选择器（General Sibling Selector）：

相邻兄弟选择器用于选择指定元素之后的所有兄弟元素。其语法为：element ~ sibling

예:

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

하위 선택기:
🎜하위 선택기는 지정된 요소의 직접 하위 요소를 선택하는 데 사용됩니다. 구문은 부모 > 자식입니다. 🎜🎜예: 🎜rrreee
🎜Adjacent Sibling Selector: 🎜🎜🎜Adjacent Sibling Selector는 지정된 요소의 다음 형제 요소를 선택하는 데 사용됩니다. 구문은 요소 + 형제입니다. 🎜🎜예: 🎜rrreee
🎜일반 형제 선택기: 🎜🎜🎜인접 형제 선택기는 지정된 요소 뒤의 모든 형제 요소를 선택하는 데 사용됩니다. 구문은 element ~ sibling입니다. 🎜🎜예: 🎜rrreee🎜계층적 선택자는 CSS에서 요소 간의 관계를 기반으로 유연한 스타일 선택을 하는 데 매우 유용합니다. 위 내용은 몇 가지 일반적인 계층적 선택기와 해당 코드 예제입니다. 🎜

위 내용은 계층적 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!