Question

修改

I made a jsFiddle因为它不是最简单的描述。

挑战是在活动类中实现相同的样式而不使用使用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>

我的挑战是根据标题本身的排名使标题在视觉上看起来相同。

我想知道我是否可以使用一些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;    
}

我仍然在赚取自己的条纹，所以我并不完全确定如何应对这一挑战。 Sass是一个选项，所以我也想创建一个mixin，但是一旦我找到了一个方法，我就可以处理它。

感谢任何帮助。

注意：我知道HTML5切片，但我们选择不使用新算法，因为此时辅助功能支持似乎并不强大。

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

0 个答案: