Wie formatiere ich ein übergeordnetes Element basierend auf seinen untergeordneten Elementen mit CSS?-CSS-Tutorial-php.cn

Wie formatiere ich ein übergeordnetes Element basierend auf seinen untergeordneten Elementen mit CSS?

Barbara Streisand

Freigeben： 2024-11-28 17:45:17

Original

805 Leute haben es durchsucht

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

So wenden Sie einen Stil auf ein übergeordnetes Element an, wenn es ein untergeordnetes Element mit CSS hat

In der Webentwicklung ist es häufig erforderlich, einen bestimmten Stil auf Elemente anzuwenden, die auf ihrer Beziehung zu basieren andere Elemente im DOM. Eine besondere Herausforderung besteht darin, übergeordnete Elemente zu formatieren, wenn sie untergeordnete Elemente enthalten.

Beachten Sie die folgende HTML-Struktur:

<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>

Nach dem Login kopieren

Um in CSS zu formatieren, wird das

Elemente, die untergeordnete Elemente

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

Nach dem Login kopieren

Durch Anwenden der Eigenschaften „Hintergrundfarbe“ und „Rahmen“ auf li-Elemente, die die Bedingung :has(ul.sub) erfüllen, können Sie sie von diesen unterscheiden li-Elemente, die keine untergeordneten ul.sub-Elemente haben.

Es ist wichtig zu beachten, dass der :has()-Selektor nicht in allen Browsern unterstützt wird, sodass die Verwendung dieses Ansatzes möglicherweise Browserkompatibilität erfordert Überlegungen.

Das obige ist der detaillierte Inhalt vonWie formatiere ich ein übergeordnetes Element basierend auf seinen untergeordneten Elementen mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!