Question

我尝试使用CSS / SASS在我的标记中设置某个<div>样式，并且我对于它为什么不应用规则毫无头绪。这是我的标记：

<div class="row addon-header">
    <div class="col-sm-3">
    // something here
    </div>
    <div class="col-sm-9">
        <h2>Title</h2>
        <h6><em>Slogan</em></h6>
        <div class="col-xs-1">
            // I want to access this
        </div>
        <div class="col-xs-1"></div>
        <div class="col-xs-1"></div>
        <div class="col-xs-1"></div>
    </div>
</div>

这就是我试图使用的SASS：

div.addon-header {
    color: white;
    > div.col-sm-9 > div.col-xs-1:first-child {
        background-color: black;
        padding-left: 0px !important;
    }
}

如果我删除了SASS中的:first-child选择器，它会正常工作，但对于每个<div class="col-xs-1">显而易见，而不仅仅是第一个，这不是我想要的。

我也试过玩游戏并做类似

的事情

div.addon-header {
    color: white;
    > div.col-sm-9 > div.col-xs-1 {
        &:first-child {
            background-color: black;
            padding-left: 0px !important;
        }
    }
}

或

div.addon-header {
    color: white;
    > div.col-sm-9 {
        > div.col-xs-1:first-child {
            background-color: black;
            padding-left: 0px !important;
        }
    }
}

或使用:nth-child(1)代替。什么都行不通。我一无所知。在我的SASS的其他地方，我有以下内容：

.tab-content {
    >.tab-pane:first-child > form > div.row > div {
        // rules here
        > div.picture-container {
            // rules here
        }
    }
    >.tab-pane {
        // rules here
    }
    >.tab-pane:nth-child(4) > form {
        // rules here
    }
}

哪个工作正常。所以我真的不知道我在第一个例子中做错了什么。有人能帮忙吗？

Answer 1

col-xs-1需要包装row，因为此块不是第一个元素。第一个元素是h2

Answer 2

您需要:nth-of-type()（或者，在您的情况下，:first-of-type选择器）。

在您提供的示例中，:first-child .col-sm-9元素是h2。

div.addon-header {
    color: white;
    > div.col-sm-9 > div.col-xs-1:first-of-type {
        background-color: black;
        padding-left: 0px !important;
    }
}

请注意，:nth-of-type()选择器（如:nth-child()选择器）仅适用于标记，而不适用于类名;如果您要在第一个div之前插入另一个.col-xs-1，那么这将不再有效。

SASS / CSS ::首子选择器无法正常工作

2 个答案: