使用CSS为Xaringan第一张幻灯片添加边框不生效如何解决？

不生效的核心原因 #

• 选择器匹配错误：Xaringan基于remark.js渲染的DOM结构中，.remark-slides-area下的第一个直接子div不是你的目标内容幻灯片，remark会优先插入内部的隐藏占位元素，你写的通用div:first-child规则匹配到了无关的隐藏元素，没有命中实际的幻灯片容器。
• 选择器优先级不足：就算匹配到了对应元素，你的规则权重低于Xaringan默认的幻灯片样式规则，也会被覆盖无法生效。

可用的解决方案 #

方案1：直接匹配第一张幻灯片（无需修改Rmd代码） #

如果你要加边框的是YAML自动生成的标题幻灯片，直接用Xaringan内置的标题幻灯片类写样式即可：

.title-slide {
  border: 5px solid red !important;
}

如果你要加边框的是你手动写的# First Slide这一页（也就是整个演示文稿的第二页，第一页是自动生成的标题页），可以用以下规则：

.remark-slides-area .remark-slide:nth-of-type(2) {
  border: 5px solid red !important;
}

如果不需要默认的标题幻灯片，可以在YAML的nature配置里加titleSlideClass: []关闭自动标题页生成，之后你手动写的# First Slide就会变成第一页，选择器里的nth-of-type参数改成1即可。

方案2：给目标幻灯片加自定义类（稳定性最高） #

这种方法不会受渲染结构变动影响，优先推荐使用：

1. 在Rmd中对应幻灯片的分隔线后添加自定义类

---
class: red-border
# First Slide
---

2. 在CSS文件中添加对应规则

.red-border {
  border: 5px solid red;
}

内容的提问来源于stack exchange，提问作者Laura