SASS 样式两个没有类的嵌套 div/

Question

>我有以下html标记：

<div class="container">
<div> <------Want this to bee 100% height
<div class="child">
</div>
<div class="child">
</div>
<div> < --------- 100% height
</div>
</div>
</div>

我希望两个无类div 的高度为100%

.container {
height: 100%;
> div {
height: 100%;
},
> div > div {
height: 100%;
}
}

这有效，但我如何在单个规则中完成此操作？

Answer 1

是的，您可以使用:not伪选择器来排除任何具有类的元素。

.container {
height: 100%;
div:not([class]) {
height: 100%;
}
}

这将实质上选择任何没有类属性集的div。

下面是将上述 SASS 编译为 CSS 的示例。

.container {
height: 100%;
}
.container div:not([class]) {
height: 100%;
background: blue;
}
.container div.child {
background: red;
}

<div class="container">
<div>
jkfhakfhkadshfksdhfasdk
<div class="child">
child
</div>
<div class="child">
dhild
</div>
<div>
djalfjasdl;fjasl;fjas;lfj
</div>
</div>
</div>

编辑：如果你只想深入两级(意味着类divs在第二级div中不会受到影响(，你可以这样做：

.container {
height: 100%;
> div:not([class]) {
height: 100%;
> div:not([class]) {
height: 100%;
}
}
}

这是它与第二级选择器的操作：

.container {
height: 100%;
}
.container .child {
background: blue;
}
.container>div:not([class]) {
height: 100%;
background: red;
}
.container>div:not([class])>div:not([class]) {
height: 100%;
background: red;
}

<div class="container">
<div>
top level no class
<div class="child">
first child with class
</div>
<div class="child">
first child with class
</div>
<div>
second child no class
<div class="child">
third child with class
<div>
fourth child no class no affected by red bg
</div>
</div>
</div>
</div>
</div>

这是一个小提琴 https://jsfiddle.net/dcmh5sga/

Answer 2

如果需要它成为单个规则，可以这样做：

.container, .container > div, .container > div > div {
height: 100%;
}

您还可以将该规则应用于所有子div，如果这适用于您的情况：

.container, .container div {
height: 100%;
}