Html 具有未知顶级标题的CSS/Sass级联标题样式

编辑：

因为这不是最容易描述的

挑战是在活动类中实现相同的样式，而不使用JavaScript或以任何方式更改HTML

---

问题：我正在做一个项目，重点是无障碍性。这带来的限制是标题结构极其重要。不幸的是，我们需要包含具有自己标题的重复部分，这些标题不一定总是出现在同一标题级别下

例如：

<h1>Title</h1>
<aside class="activity">
    <!-- Heading must be h2 as the activity falls under an h1 -->
    <h2>Section Title</h2>
    <p>some text</p>
</aside>
<p>some text</p>

<h2>Heading</h2>
<p>some text</p>

<aside class="activity">
    <!-- Heading must be h3 as the activity falls under an h2 -->
    <h3>Section Title</h3>
    <p>some text</p>
    <h4>Heading</h4>
    <p>some text</p>
    <h5>Heading</h5>
    <p>some text</p>
</aside>

我仍在努力挣钱，所以我不能完全确定如何应对这一挑战。Sass是一个选项，所以我也想创建一个mixin，但是一旦我找到了一种方法，我就可以处理它了

感谢您的帮助

---

注意：我知道HTML5分区，但我们选择不使用新算法，因为可访问性支持目前似乎不强。

Edit:无法理解-您能解释更多吗？“不幸的是，我们需要包含具有自己标题的重复部分，而这些标题不一定总是出现在同一标题级别下。”为什么标题不可预测？@Troythonpson并不是说标题不可预测。这些章节将包含说明、澄清、警告等，可能出现在主要内容的任何地方。我想知道这句话。“不一定总是出现在同一标题级别下的标题”。试图理解为什么不能有一个正常的系统来处理标题的大小。@TroyThompson-我不知道“正常系统”是什么样子。这是一个WCAG2.0A11Y项目，在LMS的iFrame中呈现静态HTML页面。没有服务器参与协助处理，所以我可以将更多的工作转移到CSS中，我们的系统就越不容易出错（读：人类）。这些页面将被“主题专家”（未接受前端设计培训）所触动，这意味着它们需要格外健壮，并且非常用户友好。我可以训练他们使用合乎逻辑的继承权，但如果这是你的建议，我不能依靠他们来应用头衔类别。

// Level 1
.activity h2,
.activity h3,
.activity h4,
.activity h5,
.activity h6 {
    font-size: 18px;
}

// Level 2
.activity > h2 ~ h3,
.activity > h3 ~ h4,
.activity > h4 ~ h5,
.activity > h5 ~ h6 {
    font-size: 16px;
}

// Level 3
.activity h2:nth-of-type(1) ~ h3 ~ h4,
.activity h3:nth-of-type(1) ~ h4 ~ h5,
.activity h4:nth-of-type(1) ~ h5 ~ h6 {
    font-size: 14px;    
}