首页 文章

SASS / CSS ::首子选择器不工作[重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我正在尝试使用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 选择器，它可以正常工作，但对于每个_671450都是显而易见的，而不仅仅是第一个，这不是我想要的 .

我也尝试过玩耍和做类似的事情

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

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

css sass css-selectors

2 回答

  • 0

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

    回复于
  • 0

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

    在您提供的示例中， .col-sm-9 的 .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() 选择器）仅适用于标签，而不适用于类名;如果你要在第一个 .col-xs-1 之前插入另一个 div 那么这将不再有效 .

    回复于

相关问题