Pemilih CSS (jika elemen tidak mempunyai induk tertentu)

Question

Saya ingin menukar gaya elemen jika ia tidak mempunyai elemen induk tertentu tanpa perlu menulis ganti kepada nilai asalnya.

Lihat https://jsfiddle.net/xqb2z8tc/ Masalah dengan kod di atas ialah kerana penggunaan mixin yang banyak, ia menghasilkan banyak css, jadi kami ingin menulis semula. Saya terfikir untuk menggunakan pemilih ':has()' (sokongan penyemak imbas baik untuk kami), tetapi saya tidak tahu caranya.

Sama seperti kod di bawah, tetapi ia sepatutnya berfungsi dalam semua kes, lihat jsfiddle di atas.

.dark-view:not(:has(.obox)) p {
  color: white;
}

Answer 1

Berdasarkan tafsiran saya terhadap soalan itu, nampaknya anda ingin menggunakan color: #fff pada semua elemen color: #fff 应用于 .dark- 中的所有

元素view 不是 .obox 元素的后代。如果是这种情况，请考虑使用选择器 .dark-view p:not(.obox *) dalam .dark-view bukan elemen .obox. Jika ini berlaku, pertimbangkan untuk menggunakan pemilih .dark-view p:not(.obox *):

p {
  color: #111;
}

.dark-view p:not(.obox *) {
  color: #fff;
}

/* irrelevant demo stuff */
.dark-view {
  background: #333;
  padding: 10px;
}

.obox {
  background: #eee;
  border: 1px solid red;
  padding: 2px;
  margin-bottom: 5px;
}

<div class="dark-view">
  
  <div class="obox">
    <p>default</p>
  </div>
  
  <div>
    <div class="obox">
      <p>default</p>
    </div>
  </div>
  
  <div>
    <div>
      <div class="obox">
        <p>default</p>
      </div>
    </div>
  </div>
  
  <p>ondark</p>
  <div>
    <p>ondark</p>
  </div>
</div>

<p>default</p>

<div class="dark-view">
  <p>ondark</p>
  <div>
    <p>ondark</p>
  </div>
  <div>
    <div>
      <p>ondark</p>
    </div>
  </div>
</div>