Scss,n-child& :not()选择器

时间:2017-05-25 17:17:01

标签: css sass

我对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 odd / even是在容器中的所有行/子项上计算的,而不仅仅是.row(s)。 有没有办法奇怪/偶数样式.rows,但从奇数/偶数旋转中排除.subitems?我想也许有一种方法可以使用:scss中的not(),但到目前为止我还没有成功。

2 个答案:

答案 0 :(得分: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;
        }
}
  

参考: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>

答案 1 :(得分:1)

正如我已经评论过的那样:如果你将.row变成<section>并保留兄弟姐妹(他们在同一级别(彼此相邻)而不是嵌套在里面将.row)作为<div>,您可以使用以下内容维护.row上的奇数/偶数序列:

  

部分:第n的类型(单数)

使用:nth-of-type()选择器可以让您通过使用不同的标签进行更多控制,这些标签在策略性使用时,可以让您专门定位标签。

演示

section:nth-of-type(odd) {
  background: rgba(0, 0, 0, .4)
}

section:nth-of-type(even) {
  background: rgba(200, 0, 0, .4)
}
<div class="rows-container">
  <section class="row">ROW1</section>
  <div>DIV</div>
  <section class="row">ROW2</section>
  <div>DIV</div>
  <div>DIV All divs are not children of any .row</div>
  <div>DIV All divs are siblings of the .row</div>
  <section class="row">ROW3</section>
  <div>DIV</div>
  <section class="row">ROW4</section>
  <div>DIV</div>
  <div>DIV</div>
  <section class="row">ROW5</section>
  <div>DIV</div>
  <section class="row">ROW6</section>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>
</div>