選擇第一和一流

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) { ... } 
     } 
    } 
}