如何让自定义 CSS 成为 Shiny 中的主导 CSS？

Question

我的闪亮应用有一个自定义 CSS 文件。我知道它正在被阅读，因为其中一些元素通过了。但是，某些元素被覆盖。如果我添加!important，它会修复它们，但是有很多，这不是一个好习惯。我可以指定我的自定义 CSS 始终优先吗？

我已经尝试了这两种挂钩 css 的方法，它们都做同样的工作。

ui <- fluidPage(
  tags$head(includeCSS("www/my_theme.css")
    #tags$link(rel = "stylesheet", type = "text/css", href = "my_theme.css")

),

Answer 1

您要查找的是名为 specifity 的 css 选择器。乍一看，这似乎是一个复杂的主题……但它并不复杂。

有多少标签/id/类被用来指定样式。

id 比类更重要
类比标签更重要（元素名称如div）

一般来说，使用的 id/classes/tags 数量较多比使用较少类的样式更重要（= .a.b.c {...} 比 .a.b {...} 更重要）。

直接在 html 中标注的样式（内联样式）比加载文件中的样式更重要。

还有一些其他的规则...

将所有这些 CSS 放在一起计算选择器的特异性。

这里有两个链接
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specifishity.com/

实用

// most often it is enough to add one more tag/class/id  
// to the rule --> BUT YOU HAVE TO TEST IT ON THE ACTUAL RULE

// before
.classA { ...}

// now to overwrite:
div.classA {...}

// or much higher specifity
body .classOffContainer div.classA {...}

注意：但为了可能的调试，请保持简单！！！
大多数情况下，选择器中再多一个“演员”就足够了！

---

对不起！！ -- 更新

这里有很多初学者，我确实得到了你的问题可能是错误的......

没有。没有办法将一个 css 文件排在另一个 css 文件之上。包含的文件总是获得相同的特异性值，独立于它们的加载顺序。

我不确定以下内容：
也许你尝试将你的 css 从 css 文件移动到 html 文件头部的脚本块......但我不是很乐观，这将获得更高的特异性。

更新 2

对于问题的粗略和肮脏的快速工作想法：

1. 将您的代码复制到SASS 文件中。
2. 将整个代码包装在html 和/或body 标记中。
3. 这会在您的 CSS 中的所有选择器/分类之前添加一个 html和/或 body。
4. 不优雅但速度快，生成更高的特异性且易于调试，并且最终（几乎）没有人关心干净的 CSS。
5. 将新生成的 css 文件添加到项目中。

// example off SASS file
// to expalyin what I mean:

html [optional: body] {

   ... your whole css ...

}