css - 如何将具有功能的高级CSS应用于除一个元素以外的主体

Question

我正在使用 HTML5 模板，但我遇到了这个 CSS 属性，它具有一些功能，例如 is-loading、is-switching:

body.is-loading *, body.is-loading *:before, body.is-loading *:after, body.is-switching *, body.is-switching *:before, body.is-switching *:after {
            -ms-animation: none !important;
            animation: none !important;
            transition: none !important;
            transition-delay: none !important;
        }

我不能删除它，因为我的模板不起作用，基本上，它会在开始时(加载时)禁用动画和过渡，但因为我有一个 loading div id loading因此它不会工作，因为所有 body 的动画都已被禁用。

根据我在互联网上找到的信息，我尝试使用 not() 将 CSS 应用于除我的 Id loading 之外的所有内容，如下所示，但不幸的是它没有'工作:

body.is-loading *:not(#loading), body.is-loading *:not(#loading):before, body.is-loading *:not(#loading):after, body.is-switching *:not(#loading), body.is-switching *:not(#loading):before, body.is-switching *:not(#loading):after {
        -ms-animation: none !important;
        animation: none !important;
        transition: none !important;
        transition-delay: none !important;
    }

Answer 1

如果您不能修改 body 标签但可以添加新的 css，则可以通过在 body css 标签下方添加代码来提高特异性。

body.is-loading *,
body.is-loading *:before,
body.is-loading *:after,
body.is-switching *,
body.is-switching *:before,
body.is-switching *:after {
  -ms-animation: none !important;
  animation: none !important;
  transition: none !important;
  transition-delay: none !important;
}

#loading {
  -ms-animation: all ease-in-out 0.3s !important;
  animation: all ease-in-out 0.3s !important;
  transition: all ease-in-out 0.3s !important;
  transition-delay: all ease-in-out 0.3s !important;
}