如何用SCSS为无内容的header-cart类添加样式？

问题分析 #

你需要给.header-cart类元素在AJAX加载前（内部为空）添加样式，加载后内部会出现.offcanvas-content-container元素。你原代码的问题在于：

• 语法错误：.dropdown-menu > {是不完整的选择器，缺少子元素的具体标识
• 逻辑错误：选择器嵌套和:has()的使用方向错误，应该直接判断.header-cart内部是否存在目标元素，而非判断它是否带有某个类且包含目标元素

正确的SCSS实现方案 #

根据你的需求，推荐使用:not(:has())组合选择器，它能精准判断元素内部是否不存在指定子元素，不受空白字符影响，比:empty更可靠（:empty会忽略空白但如果有换行/空格可能失效）：

// 假设.header-cart是.dropdown-menu的直接子元素，可根据实际结构调整
.dropdown-menu > .header-cart {
  // 当内部没有offcanvas-content-container时应用样式
  &:not(:has(.offcanvas-content-container)) {
    border: 5px solid green;
  }
}

如果.header-cart的父元素不是.dropdown-menu，直接针对类本身即可：

.header-cart {
  &:not(:has(.offcanvas-content-container)) {
    border: 5px solid green;
  }
}

补充说明 #

• :has()选择器是CSS4新增特性，现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均支持，若需兼容旧浏览器才需要考虑JS方案
• 如果你的场景中AJAX加载前.header-cart确实完全无任何内容（包括空白），也可以用:empty伪类替代，写法更简单：

  .header-cart:empty {
    border: 5px solid green;
  }
  

内容的提问来源于stack exchange，提问作者emptyobjects3