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

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>