如何让CSS类仅作用于父组件，解决:not选择器失效问题

原选择器失效的原因 #

你写的accordion-group :not(app-child)选择器逻辑完全错误：

• 这是后代选择器，会匹配父组件accordion-group下所有层级中不是app-child标签的元素——包括app-child内部的.panel-heading、.panel-title这些元素（因为它们本身不是app-child标签），所以样式会毫无意外地扩散到子组件里。
• 你的简化示例里div:not(div)更是无效选择器，没有元素能同时满足「是div又不是div」，自然不会生效。

正确解决方案 #

根据你的需求，要让样式仅作用于父组件的accordion-group内部元素，有两种靠谱的方法：

方法1：使用直接子选择器限定层级 #

利用>直接子选择器，明确只选中父组件accordion-group的直接后代元素，不会穿透到子组件内部：

// 只选中accordion-group直接子元素里的.panel-heading
accordion-group > .panel-heading {
    height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 20px;
}

accordion-group > .panel-body {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

accordion-group > .panel-title {
    width: 100%;
}

对应你的简化示例，要选中span1和span2，写法是：

.acc > .acc {
    border: solid black;
}

方法2：给父组件加唯一类名（更稳妥） #

如果直接子选择器因为组件结构限制不好用，给父组件的accordion-group加一个专属类名，比如parent-acc-group，用类名精准锁定目标：

// 仅作用于带parent-acc-group类的accordion-group内部
accordion-group.parent-acc-group {
    .panel-heading {
        height: 44px;
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 20px;
    }

    .panel-body {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .panel-title {
        width: 100%;
    }
}

然后修改父组件的HTML：

<accordion-group class="parent-acc-group">
  <!-- 父组件内容 -->
</accordion-group>

这种方法不受组件嵌套结构影响，是最不容易出问题的方案。

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