Question

这是我的HTML代码：

<div class="role-main">
    <div class="abc">
    </div>
    <div class="bca">
    </div>
    <div class="test">
    </div>
    <div class="test">
    </div>
    <div class="test">
    </div>
</div>

这是css部分：

.role-maine .test:first-of-type {margin-left:0px}
.role-maine .test {margin-left:30px;}

所以我为第一个类分配de margin-left：0px，其名称为“test”？

Answer 1

您正在寻找的选择器似乎是:first-child，例如：

.role-main .test:first-child { margin-left: 0; }

在这种情况下，为了重构它，你也可以这样做：

/* .role-main .test:first-of-type {margin-left:0px}
   Not needed anymore */
.role-main .test:not(:first-child) { margin-left: 30px; }

编辑：作为 @Popnoodles 答案的补充，您的名字确实不同。我的代码是固定的。

Answer 2

它没有用，因为你的代码中有拼写错误。你的div已经进入了html类role-main，但在CSS中你称之为.role-maine。

Answer 3

只有JS解决方案可以帮到你。

var el = document.getElementsByClassName('test')[0];
el.style.marginLeft = "0px";

http://jsfiddle.net/z0jbpnaq/

这可能对大家有帮助 - CSS select first element with a certain class

如何从CSS中的div中选择第一个类？

3 个答案: