Question

因此，对于我的问题，您可以参考udacity.com主页。

我试图访问这个文本 - 页面中间某处的“Udacity Difference”。我试过这个：

d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")

以上都不起作用。所以我试着在这个页面中查看dev-tools元素部分。然后我可以盘旋并看到： div.banner-content还有进一步的

{div.container
      {div.row
          {div.col-xs-12 text-center
              {h2.h-slim}}}}

然后我认为好的，如果我至少可以获得“容器”，我会试试，但即便如此

d3.select("div.banner-content.div.container")

OR

d3.select("div.banner-content.container")

不起作用!!!!

逻辑错误？

Answer 1

您可以使用d3的链式语法找到嵌套元素，如下所示。

HTML：

 <div class="banner-content">
    <div class="container">
        <h2 class="h-slim">Header</h2>
    </div>
</div>

代码：

d3.select("div.banner-content").select("div.container").select("h2.h-slim")

编辑：无需输入如此长的语法。只需要使用空格分隔选择器。

d3.select("div.banner-content div.container h2.h-slim")

在这种情况下，下面的代码也会给你相同的结果。如有必要，您可以专门添加标签。

d3.select("div.banner-content .container .h-slim")