CSS 使用通配符 * :not() 中的所有元素

Question

我已经编写了一些在引导模式中选择元素的 JS。为了确保所述 JS 只选择属于模式本身的元素（即在其页眉/页脚内），但排除模式主体中的任何元素，我将以下 select 片段附加到我的选择器中：

:not(.modal-body *)

例如，如果我在模态中选择

.btn:not(.modal-body *)

，这将排除模态主体中存在的任何

.btn

，并且仅返回模态页眉/页脚中的内容。

但是，某些浏览器似乎不支持此选择器，并会出现以下错误：

Message: 'Failed to execute 'querySelector' on 'Element': '.modal-footer:not(.modal-body *)' is not a valid selector.'

所以我想知道是否有另一种方法来创建这样的选择器，而不使用非伪类中的星号，我假设这是错误的原因。

Answer 1

您可以通过使用子组合器 (>) 选择模态页眉/页脚的直接子级来实现此目的。

对于CSS

.modal:not(.modal-body) .btn {
    /* your styles */
}

对于JavaScript

document.querySelectorAll('.modal > :not(.modal-body) .btn');