Hom...">

Hom..."/>

Hom...">

Hom...">

从Sass元素中仅选择直接子级

CSS

逆天凯

2020-03-23

可以说我有以下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其中33％的问题account是逻辑问题div {width: 33%}。我知道我可以通过以下方式选择直接子元素：

header {
  > div {
  }
}

但是，即使我把>所有其他类放在首位，这也无济于事。我也知道我可以说宽度应该为0或再次输入，.account但是我想防止这种情况。

第2922篇《从Sass元素中仅选择直接子级》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
LGil 2020.03.23

我不确定我了解你。但是我认为您希望在纯CSS中结合直接子代和子伪选择器：

header > div:first-child {
}

或者，对于第二个div：

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

您还可以使用not选择器：

header > div:not(.account) {
}

排除任何不需要的div。

番长樱梅 2020.03.23

尝试这个： 

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

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

取出div宽度，并将其仅应用于直系子女。保持休息。这是快速提琴（稍后删除.option和.search样式，仅用于可视化）。

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android