如何在Reveal.js中切换片段时修改指定片段的文本样式？

要实现后续片段显示时修改已显示片段的样式，我们可以结合Reveal.js的片段状态属性和CSS选择器，或者通过事件监听来动态控制样式。以下是具体解决方案：

步骤1：标记需要修改的目标元素 #

先给要变色的数字添加自定义类，方便后续定位：

---
title-slide: false
format: 
  revealjs:
    theme: sky
---

## Test

::: {.fragment .fade-in}
Part 1
:::

::: {.fragment .fade-in .tiny-text}
<span class="num-22">22</span> number of this sentence should turn green when the third fragment is on.

<span class="num-23">23</span> number of this sentence should turn red when the third fragment is on.

At the fourth fragment, these two numbers should be back to black.
:::

::: {.fragment .fade-in .tiny-text}
Third fragment is on. 22 and 23 should be coloured green and red.
:::

::: {.fragment .fade-in .tiny-text}
Fourth fragment: back to black.
:::

步骤2：添加CSS样式控制 #

Reveal.js会在片段切换时给<body>标签添加data-fragment-index属性，值为当前激活的片段索引（从0开始）。利用这个属性编写CSS规则即可实现样式切换：

<style>
  .tiny-text {
    font-size: 0.6em;
  }

  /* 第三个片段激活时（索引为2），修改数字颜色 */
  body[data-fragment-index="2"] .num-22 {
    color: green;
  }
  body[data-fragment-index="2"] .num-23 {
    color: red;
  }

  /* 第四个片段激活时（索引为3），恢复默认黑色 */
  body[data-fragment-index="3"] .num-22,
  body[data-fragment-index="3"] .num-23 {
    color: black;
  }
</style>

可选：用JavaScript事件监听实现灵活控制 #

如果需要处理回退片段等复杂场景，可以通过Reveal.js的片段事件来动态修改样式：

<script>
// 监听片段显示事件
Reveal.on('fragmentshown', function(event) {
  // 获取当前片段在父容器中的索引
  const fragmentIndex = Array.from(event.fragment.parentElement.children).indexOf(event.fragment);
  const num22 = document.querySelector('.num-22');
  const num23 = document.querySelector('.num-23');

  if (fragmentIndex === 2) {
    // 第三个片段显示时设置颜色
    num22.style.color = 'green';
    num23.style.color = 'red';
  } else if (fragmentIndex === 3) {
    // 第四个片段显示时恢复颜色
    num22.style.color = 'black';
    num23.style.color = 'black';
  }
});

// 监听片段隐藏事件，处理回退场景
Reveal.on('fragmenthidden', function(event) {
  const fragmentIndex = Array.from(event.fragment.parentElement.children).indexOf(event.fragment);
  const num22 = document.querySelector('.num-22');
  const num23 = document.querySelector('.num-23');

  if (fragmentIndex === 2) {
    // 隐藏第三个片段时恢复颜色
    num22.style.color = 'black';
    num23.style.color = 'black';
  }
});
</script>

说明 #

• 片段索引从0开始计数：第一个片段对应索引0，第三个片段对应索引2，第四个对应索引3。
• CSS方案简洁高效，适合简单样式切换；JavaScript方案适合需要复杂交互或回退处理的场景。

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