非直接子元素的选择器

sup*_*ize 5 html css

谁能告诉我在父级而不是直系子级中查找元素的选择器是什么。例:

<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>
Run Code Online (Sandbox Code Playgroud)

所以我想在不知道之间以及使用纯CSS的元素数量的情况下查找.textvia .main

谢谢

Jos*_*ier 7

您可以使用以下选择器:

.main > * .text
Run Code Online (Sandbox Code Playgroud)

它将选择.text属于的后代的所有元素.main,而不是直接子代的所有元素。

  • @HiddenHobbes您的解决方案确实有效,但是我必须保证只有`.text`被选择,至少是`body`的子代!我猜这是最优雅的方式! (2认同)

Man*_*wal 5

您可以简单地用于所有客户端元素:

.main .text
{
/*css*/
}
Run Code Online (Sandbox Code Playgroud)

演示版

为了避免后代元素(中间子元素),您应该在以下之间添加 *:

.main * .text
{
/*css*/
}
Run Code Online (Sandbox Code Playgroud)

特色演示