html - CSS - 只有类型选择器没有正确应用

Question

我提供的是我的代码的简化版本。假设这是我的 .html 文件:

<div>
 <div class="you">Novus ordo seclorum</div>
 <div class="you">Novus ordo seclorum</div>
 <div class="me">I have a buddy below me.</div>
 <div class="me">I have a buddy above me. </div>
 <div class="you"> I am a lonely type. Before and after are all 'me'</div>
 <div class="me">I have a buddy below me.</div>
 <div class="me">I have a buddy above me. </div>
</div>

我想将特定的 .css 样式应用到 class="you" ，它在中间是一个人。在他的上方和下方都没有 class="you" 的元素。

我尝试使用 :only-of-type 选择器，但它没有对元素应用任何样式。

.you:only-of-type {
  color: red;
}

那么如何将特定样式应用于其上方或下方不具有相同 class 元素的元素？

Answer 1

遗憾的是，CSS 中没有紧接上一个元素的选择器。

你可以在 javascript 中做的是识别紧跟在 .me 之后的每个 .you(使用 + 选择器)然后应用一个 .only-you 类，如果它是 also 后跟一个 .me。

工作示例:

var meBeforeYous = document.querySelectorAll('.me + .you');

for (var i = 0; i < meBeforeYous.length; i++) {

    if (meBeforeYous[i].nextElementSibling.classList.contains('me')) {
        meBeforeYous[i].classList.add('only-you');
    }       
}

.you {
font-weight: bold;
}

.only-you {
color: rgb(255, 0, 0);
}

<div>
 <div class="you">I am a you (with a buddy below).</div>
 <div class="you">I am a you (with a buddy above).</div>
 <div class="me">I have a buddy below me.</div>
 <div class="me">I have a buddy above me. </div>
 <div class="you"> I am a lonely type. Before and after are both 'me'</div>
 <div class="me">I have a buddy below me.</div>
 <div class="me">I have a buddy above me. </div>
 <div class="you">I am a you (with a buddy below).</div>
 <div class="you">I am a you (with a buddy above).</div>
 <div class="me">I have a buddy below me.</div>
 <div class="me">I have a buddy above me. </div>
</div>