将属性选择器与相邻兄弟姐妹一起使用

Question

我试图与相邻的类一起使用属性选择器。 但是，它似乎无法协同工作。

还有其他方法可以使相邻的，非相同的同级应用CSS吗？

我也尝试过这个，没有运气：

.tbslant-uphill + .tbslant-downhill {margin-top: -120px;} 

[class^="tbslant"] + [class^="tbslant"] {margin-top: -120px;}

<section class="content-block bg-green slant-on tbslant-uphill"></div>
<section class="content-block bg-green slant-on tbslant-downhill”></div>

Answer 1

你的属性选择要求“tbslant”是在类名列表的开始和你的情况不是这样的。

您需要“ tbslant”的选择器出现在列表中的任何位置 。

[class*="tbslant"] + [class*="tbslant"]

 [class*="tbslant"] + [class*="tbslant"] { margin-top: 20px; background: blue; } section { padding: 1em; background: red; } 

 <section class="content-block bg-green slant-on tbslant-uphill"></section> <section class="content-block bg-green slant-on tbslant-uphill"></section>