html - 如何选择匿名嵌套子元素？

Question

我在“元素组”中嵌套了三个匿名子元素，我需要分别更改每个子元素中矩形的颜色。不幸的是，我无法在 CSS 中选择特定的子元素，因为每个子元素都没有唯一的 ID。这是预先生成的代码，我不得不使用 CSS 覆盖它，所以我不能简单地为每个元素添加一个特定的 id 来单独修改每个子元素。

如果没有一个子元素具有唯一 ID，我如何在 CSS 中单独选择此分组中的每个子元素？

<g class="element-group">
   <g class="element">
      <rect class="element-shape bundle-shape" 
         x="101.778125" 
         width="131"
         y="36.44939999999999" 
         height="138.5466" 
         style="fill: rgb(230, 204, 102); 
         stroke-width: 0px; 
         stroke: rgb(0, 128, 128);">
      </rect>
   </g>

   <g class="element">
      ...
   </g>

   <g class="element">
      ...
   </g>
</g>

Answer 1

不确定你到底想做什么，但如果它是特定于 CSS 的，你可以使用 nth-child 选择器:

.element:nth-child(2) {...} // replace 2 with whatever index you want.

如果你在谈论 JS 那么你可以使用:

var elements = document.getElementsByClassName('element');
console.log(elements[2]); // replace 2 with whatever index you want.