Question

使用第n种类型忽略2个不同的.section元素的正确方法是什么。这就是我所拥有的。

.section:not(:nth-of-type(1)),
.section:not(:nth-of-type(11)) {
 max-width:900px;
 margin:0 auto;
}

Answer 1

选择器的问题在于它选择了不是第一个类型的所有.section元素，以及不是第11类型的.section元素。因此，您最终选择了所有.section元素。

相反，我认为你想要

.section:not(:nth-of-type(1)):not(:nth-of-type(11)) {
    max-width:900px;
    margin:0 auto;
}

即，选择.section，它们不是第一类型，也不是第11类型。

.section:not(:nth-of-type(1)):not(:nth-of-type(11)){
  background: red;
}

<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
<div class="section">5</div>
<div class="section">6</div>
<div class="section">7</div>
<div class="section">8</div>
<div class="section">9</div>
<div class="section">10</div>
<div class="section">11</div>
<div class="section">12</div>
<div class="section">13</div>
<div class="section">14</div>
<div class="section">15</div>

Answer 2

我认为这种方法的典型方法是指定影响所有内容的CSS规则以及影响这些特定元素的更具体的规则。

.section {
  max-width: 900px;
  margin: 0 auto;
}
.section:nth-of-type(10n + 1) {
  max-width: auto;
  margin: auto;
}

.section:nth-of-type(10n + 1)不仅会针对第1项和第11项，还会针对第21项，第31项等项目，预计可能会有更多项目。

CSS - 第2个类型选择器，用于2个不同的类元素

2 个答案: