Question

寻找一种在不改变HTML标记的情况下实现某种视觉效果的方法我偶然发现了一个CSS x ~ y一般兄弟选择器，但遗憾的是它的行为与我希望的不同（根据其在规范和测试中的描述）同样）。

我们尝试为某个元素后面的所有元素着色，然后在出现另一个元素后停止着色。但是，文档中可能有许多启动/停止着色序列，而~选择器与所有其他选择器级联，清晰颜色样式取代了启动颜色在文档中的一个点到它结束后的样式。

这是一个类似于语法高亮的概念，但由于它在 TinyMCE 窗口中，我希望获得一个干净的HTML，没有其他类或内联样式，动态着色元素与内联样式或语法高亮插件等类。

我们的HTML是：

<h1 class="redbelow">Bold below</h1>
<p>test</p>
<p>test</p>
<h1 class="normalbelow">Normal below</h1>
<p>test</p>
<p>test</p>
<h1 class="redbelow">Bold below</h1>
<p>test</p>
<p>test</p>

，CSS是：

.redbelow ~ p {
    color: red;
}
.normalbelow ~ p {
    color: black;
}

（codepen：http://codepen.io/anon/pen/mPYoyz）

现在只有前两段是红色的，但是我正在寻找一种方法让前两个和最后两个红色，中间的那些是黑色。

在没有使用JavaScript键盘事件进行大量DOM操作的情况下，我是否有机会尝试实现某些黑客和/或其他方法？

Answer 1

使用分部包装：

<div class="redbelow">
  <h1>Bold below</h1>
  <p>test</p>
  <p>test</p>
</div>

<div class="normalbelow">
  <h1>Normal below</h1>
  <p>test</p>
  <p>test</p>
</div>

在你的css文件中：

.redbelow p {
    color: red;
}
.normalbelow p {
    color: black;
}

希望它有所帮助！

CSS常规兄弟选择器在单个文档中多次

1 个答案: