css - Scss，第 n 个 child & :not() selector

Question

我对 scss 有点陌生，我的行容器中的行有这种基本样式。

.rows-container{
    border-bottom:2px ridge grey;
}
.row{
    height:30px;width:100%;

    &:hover div{
        background-color:lightgrey;
        }
    &:nth-child(odd){
        background: white;
        }
    &:nth-child(even){
        background: #e0e0e0;
        }
}

以下 html 非常简单:我遗漏了一些不重要的 html。

<div class="rows-container">
    <div class="row></div> //white
    <div class="row></div> //grey
    <div class="row></div> //white
    <div class="row></div> //grey etc...
</div>

但是现在我添加了子行

<div class="rows-container">
    {{each rows}}
        <div class="row"></div>           //parent row

        {{each childs}}
        <div class="subitem"></div>   //several rows from the same table which have a parent_id connected to the current row.
        {{#each}}

    {{#each}}
</div>

我打算在点击时切换子元素。但是当没有子项可见时(子项有自己的颜色)，'.rows' 的奇数/偶数就乱七八糟了。现在我认为这是因为 nth-child 奇数/偶数是在容器中的所有行/子项上计算的，而不仅仅是 .row(s)。 有没有办法对 .rows 设置奇数/偶数样式，但从奇数/偶数旋转中排除 .subitems？我在想也许有一种方法可以在 scss 中使用 :not() ，但到目前为止我还没有成功。

Answer 1

使用 :nth-of-type

所以你的代码应该是:

.row{
    height:30px;width:100%;

    &:hover div{
        background-color:lightgrey;
        }
    &:nth-of-type(odd){
        background: white;
        }
    &:nth-of-type(even){
        background: #e0e0e0;
        }
}

REF: https://css-tricks.com/almanac/selectors/n/nth-of-type/

.subitem:nth-of-type(even) {
  background: lightslategrey;
}

.subitem:nth-of-type(odd) {
  background: red;
}

<div class="subitem">subitem</div>
<div class="">subitem no class</div>
<div class="">subitem no class</div>
<div class="subitem">subitem</div>
<div class="subitem">subitem</div>
<div class="">subitem no class</div>
<div class="">subitem no class</div>
<div class="subitem">subitem</div>
<div class="">subitem no class</div>
<div class="">subitem no class</div>