仅在指定的 div 类上应用 ioslides_presentation 中的幻灯片特定 CSS

Question

赏金将在 2 天后到期。 此问题的答案有资格获得+50声望赏金。 user12256545想提请更多人注意这个问题：

请帮我 css 造型

如何仅使用 {} 语法更改特定幻灯片的 h2 header styles？

我想使用rmarkdown和ioslides创建一个 html 演示文稿。

一些主要幻灯片应包括图像，并且它们的标题不应与图像重叠。

我试图使用www/cust.css文件中指定的一些 css ID（或类）来影响他们的布局。

markdown：

---
title: "TITLE"
subtitle: "subtitle"
output:
   ioslides_presentation:
    css: www/cust.css
---

# Main 0

## sub

# Main 1 {.cust-1 .rcorners}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``
# Main 2 {.cust-2}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

# Main 3 {#cust-3 .rcorners}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

# Main 4 {#cust-4}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

.cust-1 {
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

.rcorners img{
  border-radius: 45px;
  padding: 20px;
}


.cust-2 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

#cust-3 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -10px;
  bottom: 60px;
}

#cust-4 {
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -10px;
  bottom: 60px;
}

.auto-fadein h2{
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  top: 0px;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;breaker.s
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

<style>
div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;

但是我面临的问题是我无法通过{.cust-x}或{#cust-x}语法影响h2 header class。

它会影响图像和字幕：

或者，如果我这样使用h2 ：

.cust-2 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

它没有任何影响。

通常这些 markdown 第一级 header 幻灯片都使用这个 css：

.auto-fadein h2{
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  top: 0px;
}

但我无法更改此 class，因为它会干扰标题页等。

编辑

语法：如果我尝试使用此 css 样式将其他 html 对象作为考试目标，则 {} 工作正常：

.rcorners img{
  border-radius: 45px;
  padding: 20px;
}

在示例 1 和应用示例 3 中给出圆角图像角。

Answer 1

问题

如您所知， .cust-1 h2 {}没有定位到您想要的标题。 这是因为 HTML 结构和你想象的不一样。

你怎么知道如何定位你想要的元素？

第一步：在RStudio点击Knit to HTML（ioslides）

第二步：点击在浏览器中打开

第 3 步：使用开发人员工具（即在浏览器中按 F12 键）

可以看到HTML结构如下：

<hgroup class="auto-fadein">
  <h2>Main 1</h2>
</hgroup>
<article id="main-1" class="cust-1">
  ...
</article>

截屏：

解决方案 1

例如，要定位第四张幻灯片（即Main 1 ）中的<h2> ，请使用以下 CSS：

/* Style the position of the <h2> wrapper */
slide[data-slide-num='4'] .auto-fadein {
  /* Your CSS */
}

/* Style the <h2> */
slide[data-slide-num='4'] h2 {
  /* Your CSS */
}

有关完整解决方案，请参阅下面的my-presentation.Rmd和styles.css 。

我的演示文稿.Rmd

---
title: "Title"
subtitle: "Subtitle"
output:
  ioslides_presentation:
    css: styles.css
date: "2023-05-30"
---

# Main 0

## sub

# Main 1 {.cust-1}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
# Main 2 {.cust-2}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

# Main 3 {#cust-3}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

# Main 4 {#cust-4}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

styles.css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

/**************** Slide 4 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='4'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='4'] h2 {
  color: blue;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 5 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='5'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='5'] h2 {
  color: red;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 6 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='6'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='6'] h2 {
  color: green;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 7 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='7'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='7'] h2 {
  color: purple;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}

---

编辑

你没看懂我上面写的。 我会尽量简化。

如果你写：

# Main 1 {.cust-1}

HTML 结构如下：

<hgroup class="auto-fadein">
  <h2>Main 1</h2>
</hgroup>
<article id="main-1" class="cust-1">
  ...
</article>

意思是，您不能设置<h2>样式，因为它不是带有class="cust-1"的<article>的子元素（即， .cust-1 h2 {}不起作用）。 请参见解决方案 1 。

但是，如果您真的想使用 class 设置<h2>的样式，请参阅解决方案 2 。

方案二

您可以将 class 添加到<h2>中，如下所示：

<h2 class="main-1">Main 1</h2>

有关完整解决方案，请参阅下面的my-presentation.Rmd和styles.css 。

我的演示文稿.Rmd

---
title: "Title"
subtitle: "Subtitle"
output:
  ioslides_presentation:
    css: styles.css
date: "2023-05-30"
---

# Main 0

## sub

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-1">Main 1</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-2">Main 2</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-3">Main 3</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-4">Main 4</h2>

styles.css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

h2.main-1,
h2.main-2,
h2.main-3,
h2.main-4 {
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
}

/**************** Main 1 ****************/
h2.main-1 {
  color: blue;
}

/**************** Main 2 ****************/
h2.main-2 {
  color: red;
}

/**************** Main 3 ****************/
h2.main-3 {
  color: green;
}

/**************** Main 4 ****************/
h2.main-4 {
  color: purple;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}

Output