如何将css规则分配给具有特定类的第一个元素？ [复制]答案

【问题标题】：How to assign css rule to first element with a particular class? [duplicate]如何将css规则分配给具有特定类的第一个元素？ [复制]
【发布时间】：2016-03-31 03:56:07
【问题描述】：

我在同一个 DOM 中多次使用同一个类（正常情况下），我想使用该类对 DOM 中的第一个元素应用填充。（我正在使用 sass）。

到目前为止我尝试过>

.myclass{
    &:first-of-type{
        padding-top: 50px;
    }
}

和

.myclass{
    &:nth-child(1){
        padding-top: 50px;
    }
}

和

.myclass{
        &:nth-of-type(1){
            padding-top: 50px;
        }
    }

并且只有最后一段代码似乎对使用 .myclass 向所有元素添加填充的 DOM 有任何影响（而不仅仅是第一个）。

知道我做错了什么吗？

【问题讨论】：

用 CSS 做不到的……
用CSS可以超级完成
我去回答但显然有人标记为重复（也没有正确的答案）。有两种方法可以实现这一点：您可以添加第一个子元素，然后使用 ~ selector 撤消所有下一个元素的填充。喜欢.myclass:first-of-type ~ .myclass
另一种方法是在选择器匹配号中添加一个疯狂的函数，例如.myclass:nth-child(1+ 900n)。
它不是重复的，因为他在这里声明它在同一个 DOM（所有兄弟姐妹）中，并且标记的答案是针对所有 DOM（不是同一个父元素）

标签： html css sass

【解决方案1】：

:first-of-type 怎么样？

.myclass:first-of-type {
  // do something
}

See this fiddle

编辑

请参阅@Ryan Dantzler fiddle 关于使用 SASS 的解决方案：

https://jsfiddle.net/swpk5x86/2/

【讨论】：

OP 已经尝试过了。
不完全是这个，这在小提琴中很好用
如果这行得通，而他之前尝试过的没有，那么他的 Sass 没有被编译
很奇怪，因为他说他试过的最后一段代码有效果，所以必须编译
jsfiddle.net/swpk5x86/2