如何选择与属性规范匹配的子元素？

Question

我要选择与属性规范匹配的直接后代

这里是我的html，仅是示例。

//more opening div tags here
//the div below with the id is just to identify it, so I can use getElementById.
<div data-custom="a" id="myDiv">
   <div>random div here</div>
   <div random-container>
      <div data-custom="b">
         <div data-custom="c">
         </div>
      </div>
   </div>
</div>
//more closing div tags here

这是我当前的CSS选择器

:scope [data-custom]

但是它选择了我不需要的后代。因此，如果使用Javascript，我可以：

docuement.getElementbyId("myDiv").querySelectorAll(":scope [data-custom]")

它选择data-custom =“ b”的div很好，但是它也选择了c所不想要的div。我希望它仅选择直接后代。

是否有一种方法只能使用CSS选择器和一些JavaScript来严格选择直接后代。它也需要无限扩展。

谢谢。顺便说一句，这是我的第一篇文章，所以我不知道该过程是如何进行的:)对不起，文本可能太长了。

目的是使某些东西与AngularJS ngFor类似。但是，我正在努力选择直接后代。因此，在这种情况下：data-custom表示ngFor。

Answer 1

更简单的解决方案是确保您具有可以在CSS选择器中使用的ID或标识符类，如下所示：

:scope [id][data-custom]>[data-custom] {
  outline: 1px solid red; /*this is for visual representation */
}

<div data-custom="a" id="myDiv">A
  <div data-custom="b">B
    <div data-custom="c">
      c
    <div>
  <div>
<div>

通过外部容器上的唯一类，您可以如下调整CSS规则：

 :scope .uniqueClass[data-custom]>[data-custom] {
  outline: 1px solid red;
}