DT：默认情况下会覆盖自定义 CSS [重复]答案

【问题标题】：DT: Custom CSS is being overwritten by default [duplicate]DT：默认情况下会覆盖自定义 CSS [重复]
【发布时间】：2022-01-27 20:45:54
【问题描述】：

我正在尝试为我的 DT 的行高亮设置样式。

我在 ui.R 中添加自定义 css 使用：

  table.DataTable tbody tr.selected td {
    background-color: aliceblue !important;
    color: white;
  }

正如我在 DevTools 中看到的一样（下图；下图），但它被我假设的 DT 的默认样式覆盖（下图；上图）。如果我在 DevTools 中禁用默认样式（顶部），这也有效，即我的（选定的）行将是 aliceblue (#b0bed9) 而不是白色。

如何阻止 DT 覆盖自定义 css？这是预期/期望的行为吗？

【问题讨论】：

标签： css r shiny dt

【解决方案1】：

问题在于 css 的特殊性。见https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

假设您有以下 CSS 示例：

Div1, div2, div3 {
  background-color: blue;
}

这将被覆盖

Parrent, Div1, div2, div3 {
  background-color: green;
}

但它们都会被覆盖

#div3 {
  background-color: red;
}

这完全取决于您使用的选择器。

元素选择器为 1。类选择器为 10。 ID 选择器为 100。

将特异性视为确定最终将哪种样式声明应用于元素的分数/等级。

但是关于 !important

一些经验法则：在考虑 !important 之前，请始终寻找一种使用特异性的方法仅在覆盖外部 CSS（来自外部库，如 Bootstrap 或 normalize.css）的特定于页面的 CSS 上使用 !important。编写插件/mashup 时切勿使用 !important。切勿在站点范围的 CSS 上使用 !important。

不要使用 !important，请考虑：更好地利用 CSS 级联使用更具体的规则。通过在您选择的元素之前指示一个或多个元素，规则变得更加具体并获得更高的优先级

【讨论】：