Question

如何访问同一类的许多分组元素中的第一个？可以说我有一些看起来像这样的东西：

<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>

我想改变每个组的第一个元素的样式。怎么能实现这一目标？我试过了

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

但不幸的是它似乎不起作用（应该吗？）。

Answer 1

使用: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>

Answer 2

如何使用

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

注意：你的问题中提到的css中没有:first这样的选择器。

<强> Working Fiddle

Answer 3

如果.element将是其父级的第一个元素。你可以使用：

.element:first-child {
  /* styles here */
}

如果HTML中的<div class="element">...</div>之前有任何标记，则无法使用此功能。

请参阅docs。

Answer 4

演示 - http://jsfiddle.net/n2f8ko6y/

first-child

的文档

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

选择同一个类的第一个元素

4 个答案: