Select 仅直接来自具有 Sass 的元素的子元素

Question

假设我有以下 html:

<header class="header">
    <div class="title">
        <h1>Home</h1>
    </div>

    <div class="logo">
        <img src="#" alt="Logo">
    </div>

    <div class="account">
        <div class="options">
        </div>

        <div class="search">
        </div>
    </div>
</header>

我有以下 SCSS:

header {
    height: 4.1rem;

    div {
        width: 33%;
        float: left;
        height: 4.1rem;
        line-height: 4.1rem;
        color: #fff;

        &.title {
            h1 {
                font-weight: normal;
                font-size: 3rem;
                padding: 0;
                margin: 0;
            }
        }

        &.logo {
            text-align: center;
        }

        &.account {
        }
    }
}

现在我遇到的问题是 div options 和 search 占 account 的 33%，这符合我 div {width: 33%} 的逻辑。我知道我可以 select 直接子元素：

header {
  > div {
  }
}

但是，即使我将 > 放在所有其他类的前面，这也无济于事。我也知道我可以说宽度应该是 0 或者 .account 中的什么，但我想防止这种情况发生。

Answer 1

我不确定我是否理解你。但我认为你想要直接子选择器和子伪选择器的组合，纯 CSS:

header > div:first-child {
}

或者，对于第二个 div：

header > div:nth-child(2) {
}

您也可以使用 not 选择器：

header > div:not(.account) {
}

排除任何不需要的 div。

Answer 2

试试这个：

    ...
    & > div {width: 33%;}

    div {
      float: left;
      height: 4.1rem;
      line-height: 4.1rem;
      color: #fff;
      ...

去掉div宽度，只应用在直接子节点上。保持原样休息。这里是快速 fiddle （稍后删除 .option 和 .search 样式，仅用于可视化）。

请编辑您的问题并更好地解释您想要实现的目标。

Answer 3

在父元素中使用 & 和 >，如下所示：

.services {
    & > div {
        margin-bottom: 25px;
    }
}

Select 仅直接来自具有 Sass 的元素的子元素

Select only direct children from element with Sass

css

sass