CSS - 如何定位類的第一個實例中的所有元素？

Question

我想帶班第一克元素「V-數據點的V形變，數據點」目標內的RECT元素 - 所以我想強調的只是rect元素1。看到我的CSS代碼如下：

<g class="v-datapoint-group"> 
    <g> 
     <g class="v-datapoint v-morphable-datapoint">First</g> 
      <rect>1</rect> 
     <g class="v-datapoint v-morphable-datapoint">Second</g> 
      <rect>2</rect> 
     <g class="v-datapoint v-morphable-datapoint">Third</g> 
    </g> 
</g> 

任何人都可以請幫助如何正確地做到這一點？我試過以下內容：

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint { 
    background-color:yellow; 
} /* highlights word First, Second, Third */ 

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint rect { 
    background-color: yellow; 
} /* doesn't do anything */ 

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint:first-child { 
    background-color: yellow; 
} /* highlights word First */ 

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint:first-child rect { 
    background-color: yellow; 
} /* doesn't do anything */ 

g.v-datapoint-group rect { 
    background-color: yellow; 
} /* highlights both 1 & 2 */ 

g.v-datapoint-group rect:first-child { 
    background-color: yellow; 
} /* doesn't do anything */ 

任何想法如何定位矩形元素1？

感謝， 阿加塔

Answer 1

試試這個：

g.v-datapoint.v-morphable-datapoint:first-child { 
    background-color: yellow; 
} 

編輯

如果你只想在第一個G的矩形，添加此信息：

g.v-datapoint.v-morphable-datapoint:first-child + rect { 
    background-color: yellow; 
} 

Answer 2

嘗試g.v-datapoint-group g.v-datapoint.v-morphable-datapoint:nth-of-type(1) + rect。這應該選擇第一個數據點的所有同級rect。