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

계층적 선택자의 용도는 무엇인가요? 구체적인 코드 예제가 필요합니다

계층적 선택자는 요소 간의 관계를 통해 특정 요소를 선택할 수 있는 CSS의 선택자입니다. 계층적 선택자에는 하위 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자가 포함됩니다.

하위 선택자는 선택한 요소의 직접 하위 요소를 나타내는 보다 큼 기호(>)로 표시됩니다. 예를 들어 상위 클래스가 있는 요소 아래에서 하위 클래스의 모든 직계 하위 요소를 선택합니다.

.parent > .child {
    //样式
}

하위 선택기는 선택한 요소의 하위 요소를 나타내기 위해 공백으로 표시됩니다. 예를 들어, 클래스 조상이 있는 요소 아래에서 클래스 자손의 모든 자손 요소를 선택합니다.

.ancestor .descendant {
    //样式
}

인접한 형제 선택기는 더하기 기호(+)로 표시되며, 이는 선택한 요소의 인접한 형제 요소가 선택되었음을 나타냅니다. 예를 들어, 클래스 element1이 있는 요소를 선택한 다음 클래스 element2가 있는 형제 요소를 선택합니다.

.element1 + .element2 {
    //样式
}

일반 형제 선택기는 선택한 요소의 일반 형제 요소를 나타내기 위해 물결표(~)로 표시됩니다. 예를 들어, element1 클래스의 요소 다음에 element2 클래스의 다음 형제 요소를 모두 선택합니다.

.element1 ~ .element2 {
    //样式
}

계층적 선택기를 사용하면 요소 간의 관계를 기반으로 대상 요소를 선택할 수 있으므로 보다 정확한 스타일 제어가 가능합니다. 다음은 구체적인 코드 예입니다.

HTML 코드:

<div class="parent">
    <div class="child">这是子元素1</div>
    <div class="child">这是子元素2</div>
</div>
<div class="ancestor">
    <div class="descendant">这是后代元素1</div>
    <div class="descendant">这是后代元素2</div>
</div>
<div class="element1">这是元素1</div>
<div class="element2">这是元素2</div>
<div class="element2">这是元素3</div>

CSS 코드:

.parent > .child {
    color: red;
}

.ancestor .descendant {
    font-size: 20px;
}

.element1 + .element2 {
    background-color: blue;
}

.element1 ~ .element2 {
    text-align: center;
}

위 코드에서 클래스 부모가 있는 요소의 직계 자식은 자식 선택기(.parent > .child)를 통해 선택됩니다. 요소를 선택하고 글꼴 색상을 빨간색으로 설정합니다. 하위 선택기(.ancestor .descendant)를 사용하여 상위 클래스 요소 아래 하위 클래스의 하위 요소를 모두 선택하고 글꼴 크기를 20px로 설정합니다. 인접 형제 선택기(.element1 + .element2)를 사용하여 element1 클래스 요소 바로 뒤에 있는 element2 클래스의 형제 요소를 선택하고 배경색을 파란색으로 설정합니다. 일반 형제 선택기(.element1 ~ .element2)를 사용하여 element1 클래스의 요소 뒤에 오는 element2 클래스의 모든 후속 형제 요소를 선택하고 해당 텍스트를 중앙에 표시합니다.

계층적 선택기를 사용하면 HTML 요소를 더 유연하게 선택할 수 있습니다. 다양한 계층적 선택기를 결합하면 다양한 스타일 효과를 얻을 수 있습니다. 계층적 선택기의 사용법을 익히면 CSS 스타일을 더 쉽게 유지하고 읽을 수 있게 만들 수 있으며 개발 효율성도 향상시킬 수 있습니다.

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