0

我有这个应用全局黑暗主题的 .scss 规则。

#app.dark-theme {
  // LOTS of rules...
}

我已经决定相反主题的工具提示看起来更好。我喜欢深色主题#app 上的浅色主题工具提示和浅色主题#app 上的深色主题工具提示，而不是深色主题#app 上的深色主题工具提示。

这就是问题所在……我声明的黑暗主题规则正在影响工具提示。我需要以某种方式使里面的每条规则#app.dark-theme都不适用于工具提示。这是工具提示选择器

// Tippys can be appended anywhere in the dom, including as a direct child
// of <body>, which is the parent of #app.

#app div[data-tippy-root], // add specificity for tippys inside #app
div[data-tippy-root] {
  // tippy css
}

我已经尝试过如何从公共 CSS 样式中隔离 div？

但它会取消所有样式。我仍然希望将tippy CSS 和Bulma CSS 应用于工具提示。我只是不希望我的深色主题 CSS 影响工具提示。

我也尝试过使用:not()选择器，但它似乎不适合这个用例。

#app.dark-theme :not(div[data-tippy-root]) {
 // of course it's not this easy :)
}
4

1 回答 1

0

使用变量，看一个例子

:root {
  --primary-color: #24242b;
}

html[data-theme="dark"] {
  --primary-color: #f89898;
}


a {
  color: var(--primary-color);
}
于 2020-06-03T16:41:42.960 回答