logo标签列表

非直接子元素的选择器

htmlcss
20
有人能告诉我如何查找一个父元素下的非直接子元素的选择器吗？例如：
<body class="main">
  <p class="text">Hello</p> <!-- don't select this one -->
  <elem class="something">
    <elem id="link">
      <elem class="otherclass">
        <p class="text">Hello</p> <!-- but this one -->
      </elem>
    </elem>
  </elem>
</body>

我想要通过纯CSS找到位于`.main`中间的`.text`，而不知道它们之间元素的数量。谢谢。
为什么不使用.main .text{}呢？ - Manwal
2个回答
48

您可以使用以下选择器：

.main > * .text

这将选择所有.main的后代元素中的.text，但不包括直接子元素。

不错，特别是因为它不会选择直接子级的.text。 +1 - GreyRoofPigeon
1
@LinkinTED 我相当确定这就是 OP 想要的，因为标题说的是“非直接子元素”。不过还是有点不太清楚。 - Josh Crozier
+1 你可能是对的，虽然措辞有些模糊，但简单地使用 .main .text 的答案也是正确的。 - Hidden Hobbes
2
@HiddenHobbes，你的解决方案确实有效，但我必须保证只选择至少是body子级的.text！我想这是最优雅的方式！ - supersize
1
好的，如果是这样，那就没问题了，这绝对是你想要的答案！ - Hidden Hobbes
我感激你的帮助！ - supersize
4
您可以简单地为所有客户端元素使用以下代码：
.main .text
{
/*css*/
}

演示

为了避免后代元素（中间子元素），您应该在它们之间添加*，例如：

.main * .text
{
/*css*/
}

Featured DEMO

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接