Question

我正在尝试使用类＆＃34; v-datapoint v-morphable-datapoint＆＃34;来定位第一个 g元素中的 rect 元素。 - 所以我想只突出 rect element 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。

CSS - 如何在类的第一个实例中定位所有元素？

2 个答案: