如何將樣式應用到？apply-style-這里的樣式只滿足這個條件

的父代。這里應該是一個普通的div或者沒有。第二階段課程 。apply-style-此處父級的父級不應有. second-stage 謝謝你

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

嘗試過的解決方案

/* 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;
}

根據您的描述判斷，下面的選擇器可以工作:

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

如前所述，還不是所有地方都支持selector :has()。https://caniuse.com/css-has

另外，一些your :not()選擇器規則可以通過[class = & quot；xclass & quot]而不是。' xclass '

您樣式表可以重寫:

/* extra gaps for demo */
div{margin:0.15em;border:solid;}

/* Result: Put border to all parent of apply-style-here class*/
.first-stage:has(.apply-style-here) div:not([class]) {
  border: 1px solid gold;
} 

/* Result: No styles applied at all */
.first-stage > :not([class="second-stage"]) div {
  border: 1px solid red;
}

/* Result: No styles applied at all */
.first-stage:has(div:not([class="second-stage"]) > .apply-style-here) > div {
    border: 1px solid purple;
}

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

.first-stage:has(div:not([class="second-stage"] > .apply-style-here)) > div {
    border: 1px solid green;
}

@supports not selector( div:has(div)) {
body::before {content:'Selector :has()\0D\0A Not Supported in your browser,\0D\0A use another browser for testing.';display:block;text-align:center;background:yellow;padding:0.25em;color:crimson;font-size:2em;white-space:pre;}
}

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