选择课程的第一和第二

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

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

或

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

Answer 2

使用nth-of-type

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