:First-Child 和 :nth-child() 不工作

Question

JSFiddle Demo

在我的CSS底部，请找到以下内容；

.AdminPanelLayout .Option:nth-child(1) {
    background:#000000;
    margin-left:20px;
}

background:#000000; 不是必需的，它用于测试目的。至于margin-left:20px;是我想要达到的。

Answer 1

.AdminPanelLayout .Option:nth-of-type(2) {
    background:#000000;
    margin-left:20px;
}

http://jsfiddle.net/fg3nco9w/1/

Answer 2

嗯，看来你误解了 first-child 的概念。它不会查找满足 selector 的第一个 child。相反，它会查找 selector 谁也是其容器中的第一个 child。

致 select 你的第一个 .Option：

<div class="AdminPanelLayout">
    <div class="Title">
        2). Choose Admin Panel Layout
    </div>
    <div class="Option">

您将不得不尝试其他方法，例如：

• 其索引的目标，在本例中为 2：.AdminPanelLayout .Option:nth-child(2) {
• 将其定位为兄弟姐妹（标题后的第一个）.AdminPanelLayout .Title + .Option {

你得玩玩