Verwenden Sie nur CSS und fügen Sie den CSS-Stil zum übergeordneten Element von .apply-style-here hinzu (ohne die Klasse .second-stage).

Question

So wenden Sie einen Stil auf das übergeordnete Div von .apply-style-here an, indem Sie nur diese Bedingung erfüllen

1. Das übergeordnete Element von .apply-style-here sollte ein normales Div oder ohne eine .second-stage-Klasse sein
2. Das übergeordnete Element des übergeordneten Elements .apply-style-here sollte kein .second-stage haben Danke

<div class="first-stage">
    <div>
        <div class="apply-style-here">Content</div>
    </div>
</div>

<div class="first-stage">
    <div class="second-stage">
        <div>
            <div class="apply-style-here">Content</div>
        </div>
    </div>
    <div>
        <div class="apply-style-here">Content</div>
    </div>
</div>

Probieren Sie Lösungen aus

/* Result: Put border to all parent of apply-style-here class */
.first-stage:has(div > .apply-style-here) > div {
/*  margin-top: 20px; */
  border: 1px solid red;
}

/* Result: No styles applied at all */
.first-stage:not('div > .second-stage') > div {
  border: 1px solid blue;
}

/* Result: No styles applied at all */
.first-stage:has(div:not('.second-stage') > .apply-style-here) > div {
    border: 1px solid blue;
}

/* Result: Applied to all .apply-style-here even second .second-stage is present */
.first-stage:has(div:not(.second-stage) > .apply-style-here) > div {
    border: 1px solid blue;
}
/* Result: Applied to all .apply-style-here even second .second-stage is present */

.first-stage:has(div:not(.second-stage > .apply-style-here)) > div {
    border: 1px solid blue;
}

Answer 1

根据您的描述，以下选择器可以工作：

:not(.second-stage) > :not(.second-stage) > .apply-style-here

:not(.second-stage) > :not(.second-stage) > .apply-style-here {
  border: solid 1px blue;
}

<div class="first-stage">
    <div>
        <div class="apply-style-here">Content</div>
    </div>
</div>

<div class="first-stage">
    <div class="second-stage">
        <div>
            <div class="apply-style-here">Content</div>
        </div>
    </div>
    <div>
        <div class="apply-style-here">Content</div>
    </div>
</div>