javascript - CSS在svg标签中选择图表

Question

我有如下的html结构

   <div class="_container">
      <div id="chart-3" class="chart with-3d-shadow with-transitions">
          <svg class=".svg">
              <text class="nvd3 nv-noData" >No Data Available.</text>
      </svg>
   </div>

我已经尝试使用以下方法检查“nv-noData 是否存在”，但似乎无法正常工作:

        if ($('._container > .chart > .svg > .nv-noData').length > 0) { 
            alert("No Data!");  
        }

但是，以下确实会引发警报:

        if ($('._container > .chart > .svg > nv-noData').length > 0) { 
            alert("No Data!");  
        }

作为 CSS 的新手，解释一下为什么会有所帮助。

此外，如果我删除 class = ".svg"，CSS 会发生什么变化？

Answer 1

类通过.classname选择，但通过class="classname"定义。所以在你的例子中，你的类名应该是:

<svg class="svg">
    <text class="nvd3 nv-noData" >No Data Available.</text>
</svg>

它将通过以下方式选择:

$('._container > .chart > .svg > .nv-noData')

这在 .nv-noData 选择器之前也有一个点，因为您要在此处选择一个类。

---

或者，您可以完全省略类标签，而只使用:

$('._container > .chart > svg > .nv-noData')

请注意，我没有在 svg 选择器前面放置 .。这会导致选择器选择 svg 标签而不是类。这也可以在没有类(class)的情况下工作:

<svg>
    <text class="nvd3 nv-noData" >No Data Available.</text>
</svg>

所以总结一下:如果你选择前面有点的东西，它会选择一个类名，如果你选择前面没有点的东西，它会选择标签名。 this reference还列出了大多数其他选择器，并且 this是官方引用