CSS를 사용하여 하위 요소를 기반으로 상위 요소의 스타일을 지정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 하위 요소를 기반으로 상위 요소의 스타일을 지정하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-28 17:45:17

원래의

805명이 탐색했습니다.

How to Style a Parent Element Based on its Child Elements with CSS?

CSS를 사용하여 하위 요소가 있는 경우 상위 요소에 스타일을 적용하는 방법

웹 개발에서는 요소와의 관계에 따라 특정 스타일을 요소에 적용해야 하는 경우가 많습니다. DOM의 다른 요소. 한 가지 특별한 과제는 하위 요소가 포함된 경우 상위 요소의 스타일을 지정하는 것입니다.

다음 HTML 구조를 고려하세요.

<ul class="main">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
        <ul class="sub">
            <li>Sub Item 1</li>
            <li>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                    <li>Sub Sub Item 3</li>
                </ul>
            </li>
            <li>Sub Item 3</li>
            <li>Sub Item 4</li>
            <li>Sub Item 5</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

로그인 후 복사

CSS에서 스타일을 지정하려면

하위

을 갖는 요소 요소의 경우 :has() 선택기를 사용할 수 있습니다:

ul li:has(ul.sub) {
    background-color: yellow;
    border: 1px solid black;
}

로그인 후 복사

:has(ul.sub) 조건을 충족하는 li 요소에 background-color 및 테두리 속성을 적용하여 요소를 구분할 수 있습니다. 하위 ul.sub 요소가 없는 li 요소.

:has() 선택기가 모든 브라우저에서 지원되는 것은 아니라는 점에 유의하는 것이 중요하므로 이 접근 방식을 사용하면 브라우저 호환성 고려가 필요합니다.

위 내용은 CSS를 사용하여 하위 요소를 기반으로 상위 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!