选择班级的第一名和第二名[重复]

Question

我的 SCSS 如下所示：

.wrapper {
    .part {
        ...
        &.wheel {
            ... // code goes here
        }
     }
}

我的 html 看起来像这样：

<div class="wrapper">
    <img src="..." class="part wheel"/>
    <img src="..." class="part wheel"/>
</div>

如何使用 CSS 选择第一个和第二个 wheel？我想给他们不同的属性。

Answer 1

使用nth-of-type

.wrapper {
    .part {
        ...
        &.wheel {
            &:nth-of-type(1) { ... }
            &:nth-of-type(2) { ... }
        }
     }
}

Answer 2

.wheel:nth-of-type(1){...}
.wheel:nth-of-type(2){...}

或

.wheel:nth-child(1){...}
.wheel:nth-child(2){...}