如何使用CSS-in-JS定位一个元素？

Question

我不能访问我需要样式化的元素，并且它上面没有类名或it。如何使用CSS-in-JS定位HTML元素？例如：

svg path {
  fill: red;
}

Answer 1

当我遇到这样的情况时，我会在dev tools，elements tree选项卡中查找带有class或id的父元素，然后我可以用它来包装我需要选择的元素，例如：

<div class="parent">
  <svg />
</div>

然后，您可以选择：

.parent svg path {
  fill: red;
}

但是，如果您没有父对象，并且希望使用javascript设置svg样式，则可以执行以下操作：

var svg = document.querySelector('svg path')
svg.style.fill = 'red'

请记住，这将针对项目中的所有SVG，如果这是您想要的，那么如果您只想设计这一个SVG的样式，并且有更多您不想接触的SVG，那么您将需要找到一个好的父元素来使用，并在父元素中针对SVG，如果没有关闭父元素来查找页面ID或类似的内容。让我知道这是否有帮助，或者我可以进一步帮助你！