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>

我希望在section 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 div和color-scheme--violet-red相邻，因此css文件下面的那个将获得优先级，并覆盖其他。

我的问题是：是否有-仅使用html / css-选择每个CLOSEST相邻的每个元素？

对于此html，我无法将此部分嵌套在“颜色控制器” div中，也无法确定下一个“控制器” div之前将有多少div（如果知道的话，我可以嵌套多个“下一个兄弟姐妹”选择器，并将其命名为一天）。

我非常对任何可以实现这种布局的css黑客开放：-）

谢谢！

Answer 1

一个怪异的主意是增加每个选择器的特殊性，考虑之前的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>

Answer 2

这将是另一个hacky解决方案。为每个+添加一个.section选择器。

假设每种“颜色”中最多有.sections个数字-您可以执行以下操作（请参见演示）

（显然）困难在于，在给定的部分中，您需要编写尽可能多的+ .section兄弟姐妹

当然，您可以使用SASS / LESS来为您生成代码，但是您仍然需要找出要生成的代码。

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

/* up to 4 coloured sections  */
.color-scheme--violet-red + .section,
.color-scheme--violet-red + .section + .section,
.color-scheme--violet-red + .section + .section + .section,
.color-scheme--violet-red + .section + .section + .section + .section
{
    background-image: linear-gradient(to right, purple 0%, red 100%);
    color: white;
}

.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>
<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>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<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>
<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>

CSS中是否有一个“直到......附近”选择器（或其他方式）？

2 个答案: