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

Question

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

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

//more opening div tags here
<div data-custom="a" id="myDiv">
   <div data-custom="b">
      <div data-custom="c">
      <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来严格选择直接后代。它也需要无限扩展。

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

Answer 1

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