Question

我有一个包含文章的共同元素，并希望以不同方式对待除第一个孩子以外的所有元素：

.listing{

    article{

        // Some styles
    }

    article:not(:first-child){

       // Some more styles

    }

}

一切都很好。但是在某些列表中，它们都应该被视为相同，所以我不想包含文章：not（：first-child）选择器，它需要如下所示：

.listing.alt{
    article{
         // Some styles
         // Some more styles
    }
}

如何在不重复所有内容的情况下合并这两条规则？

Answer 1

HTML

<div class="listing">
  <article>1</article>
  <article>2</article>
  <article>3</article>
</div>
<div class="listing alt">
  <article>1</article>
  <article>2</article>
  <article>3</article>
</div>

CSS

.listing:not(.alt) article:not(:first-child) {color:gainsboro;}

Updated demo

Answer 2

好的，我想我已经用Sass弄明白了：

.listing{

     article{
          // Generic Styles
     }

    &.alt article,
    &:not(.alt) article:not(:first-child){

       // More Styles

    }
}

我也看到我的原始代码示例有点奇怪，所以我更新了它，所以它更正确。

SCSS / CSS使用：不仅仅是某些元素的选择器

2 个答案: