代码之家 › 专栏 › 技术社区 › Sudeepa T

无法定位元素[重复]

tailwind-css css-selectors sass css

Sudeepa T · 技术社区 · 1 年前

我有这样的HTML

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

只有当element2具有 removePadding 属性,我试过这样

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

但这并没有奏效。

我想瞄准它 class-3 只有当 element2具有 remove填充 属性

3 回复 | 直到 1 年前

DarkBee 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: 5px;
  box-sizing: border-box;
}

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

artikandri 1 年前

尝试将同级选择器与class-3选择器组合使用:

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

正如另一条注释所提到的,CSS选择器只能向下/下一个,不能向上/上一个。

Rafayel 1 年前

您可以使用 :has 伪类和子组合子(>)来实现想要的结果!

element1:has( > element2[removePadding] ) > element3.class-3 {
  /* your code goes here */
}

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

3 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

7 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

7 年前

Christian Luneborg · 星级评定不起作用

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

7 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

7 年前

Karos papermoon · Div和定位问题

7 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

7 年前