css排除样式:not:has

文章目录

• • [**方法1：使用 `:not()` 和 `:has()` 选择器（现代浏览器）**](#方法1：使用 :not() 和 :has() 选择器（现代浏览器）)
  • **方法2：使用兄弟选择器（兼容性更好）**
  • **方法3：通过修改HTML结构实现**
  • **方法4：使用数据属性**
  • **方法5：JavaScript辅助（如果必须动态检测）**
  • **推荐方案**
  • **注意事项**

同样都是.hljs元素，但是需要根据是否含有某子class来设置不同样式

    <div class="hljs" style="margin: 50px;">
      含有某class子元素的.hljs当前元素样式
      <span class="modified">子元素</span>
    </div>
    <div class="hljs" style="margin: 50px;">
      不含有某class子元素的.hljs当前元素样式
    </div>


/* 给没有.modified子元素的.hljs元素设置红色 */
.hljs:not(:has(.modified)) {
  color: red;
}

/* 给有.modified子元素的.hljs元素设置青色 */
.hljs:has(.modified) {
  color: cyan;
}

你可以通过几种CSS选择器组合来实现这个需求：

方法1：使用 :not() 和 :has() 选择器（现代浏览器）

/* 给没有.modified子元素的.hljs元素设置红色 */
.hljs:not(:has(.modified)) {
  color: red;
}

/* 给有.modified子元素的.hljs元素设置青色 */
.hljs:has(.modified) {
  color: cyan;
}

方法2：使用兄弟选择器（兼容性更好）

如果HTML结构可以调整，给modified添加特定标记：

<div class="hljs">
  11
  <span class="modified">22</span>
  <span class="modified-indicator"></span> <!-- 添加标记 -->
</div>
<div class="hljs">
  33
  <!-- 没有标记 -->
</div>

/* 默认所有hljs为红色 */
.hljs {
  color: red;
}

/* 有modified-indicator的hljs改为青色 */
.hljs:has(.modified-indicator) {
  color: cyan;
}

方法3：通过修改HTML结构实现

如果可以直接修改HTML，添加不同的类名会更简单：

<div class="hljs with-modified">
  11
  <span class="modified">22</span>
</div>
<div class="hljs">
  33
</div>

.hljs {
  color: red;
}

.hljs.with-modified {
  color: cyan;
}

方法4：使用数据属性

<div class="hljs" data-has-modified="true">
  11
  <span class="modified">22</span>
</div>
<div class="hljs">
  33
</div>

.hljs {
  color: red;
}

.hljs[data-has-modified="true"] {
  color: cyan;
}

方法5：JavaScript辅助（如果必须动态检测）

// 检测并添加类名
document.querySelectorAll('.hljs').forEach(el => {
  if (el.querySelector('.modified')) {
    el.classList.add('has-modified');
  }
});

.hljs {
  color: red;
}

.hljs.has-modified {
  color: cyan;
}

推荐方案

如果不需要支持旧浏览器，方法1 （使用:has()）是最简洁的。如果需要更好的兼容性，建议使用方法3 或方法4，通过添加标记来区分。

注意事项

• :has() 选择器在现代浏览器中支持良好（Chrome 105+、Safari 15.4+、Firefox 121+）
• 如果使用了:has()，需要确保浏览器版本较新
• 如果颜色需要继承给所有子元素，确保没有子元素覆盖颜色

根据你的浏览器支持需求和能否修改HTML，选择最适合的方案即可。