选择相同类别的第一个元素 [英] select first element of the same class

问题描述

如何访问同一类的多个分组元素中的第一个? 可以说我有这样的东西:

How to access first of many grouped element of the same class? Lets say i have something that looks like this:

<div class="group">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

<div class="group">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

<div class="group">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

我只想更改每个组的第一个元素的样式.如何做到这一点?我尝试过

I would like to change style for ONLY the first element of each group. How can this be achieved? I tried

.group{
    .element:first{
        ####styles here
    }
}

但是不幸的是，它似乎并没有工作(应该吗?).

But it doesn't seem to work unfortunately(should it?).

推荐答案

使用:first-child.

.group .element:first-child {
  color: red;
}

<div class="group">
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
</div>

<div class="group">
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
</div>

<div class="group">
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
    <div class="element">Test</div>
</div>

这篇关于选择相同类别的第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！