html - CSS中是否有“相邻直到...”的选择器（或任何方式）？

Question

我正在尝试创建一个基于许多相邻部分的 html 布局。我想在它们之间的某个地方拥有一些divs可以控制它们外观的东西。

我的 html 会是这样的：

<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>

而且我希望在 asection之后出现的每个color-scheme div都有一个由它定义的背景，因为我正在尝试使用这个 scss：

$white: #fefefe;
$red: #c54839;
$violet: #6c195e;

.section {
    height: 15em;
    background: $white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $red;
}


.color-scheme--violet-red ~ .section {
    background-image: linear-gradient(to right, darken($violet, 10%) 0%, darken($red, 10%) 100%);
    color: $white;
}

.color-scheme--clear ~ .section {
    background: $white;
    color: $red;
}

这是一个带有工作示例的小提琴：https ://jsfiddle.net/raphaelaleixo/4featqrg/ （最后两个部分是白色的，但它们应该是彩色的）

问题是，因为最后的部分都与color-scheme--clear divAND相邻color-scheme--violet-red，因此 css 文件中位于下方的部分获得优先权，并覆盖另一部分。

我的问题是：无论如何 - 仅使用 html/css - 选择与另一个最接近的每个元素？

对于这个 html，我不能将这些部分嵌套在“颜色控制器”div 中，我也不能确定在下一个“控制器”div 之前会有多少个 div（如果知道，我可以嵌套多个“下一个兄弟姐妹” " 选择器并收工）。

我是对任何可以实现这种布局的 css hack都很开放:-)

谢谢！

标签： htmlcsscss-selectors

Answer 1

一个 hacky 想法是增加每个选择器的特异性，考虑color-sheme之前的选择器。因此，color-sheme我们之前拥有的越多，选择器就越具体，因此它将赢得之前的选择器。

当然，您将需要编写许多 CSS 规则，具体取决于您将拥有多少个部分。您可以考虑使用 SASS/LESS 轻松生成代码：

.section {
    height: 15em;
    background: white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
}


.color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ .color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section{
    background-image: linear-gradient(to right, purple 0%, red 100%);
    color: white;
}

.color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ .color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section{
    background: white;
    color: red;
}

<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">White</section>
<section class="section">White</section>