无法定位元素

Question

我有这样的 HTML

<element1 class="class__1">
   <element2 removePadding></element2>
   <element3 class="class-3"></element3>
</element>

我想仅当element2具有

removePadding

属性时更改class-3的margin-bottom，我尝试这样

element1 element2[removePadding] element1 element3.class-3 {
    margin-top: 20px;
}

但这没有用。

我想定位

class-3

仅当element2具有

removePadding

属性

Answer 1

element1 element2[removePadding] element1

- 最后一个

element1

不应该在那里，CSS 选择器只能向下，不能向上。此外，

element3

不是

element2

的子级，而是兄弟姐妹，因此您可以使用

+

（next-sibling）选择器

div div[data-removePadding] + div.class-3 {
    margin-top: 20px;
    background: red;
}

div {
  border: 1px solid #020202;
  padding: 20px;
  box-sizing: border-box;
}

<div class="class__1">
   <div data-removePadding=""></div>
   <div class="class-3"></div>
</div>

Answer 2

尝试将同级选择器与 3 类选择器结合使用：

element1 element2[removePadding] ~.class-3 {
   margin-bottom: ...
}