nth-child不适用于前两个子元素

Question

大家好，这是一个简单的日历。在底部，在最后一行，最后4天是下个月的日子，所以我想让他们没有背景。 。他们有一个班级：下个月和我做nth-child所以：

#Januar .next-month:nth-child(-n + 2){
    background:none!important
}

。并且我将背景应用于所有元素：

.calendar tbody td:hover {
    background: #ddd;
}

这是一个codepen：https://codepen.io/anon/pen/opeoep。为什么不隐藏背景？ ：nth-​​child（-n + 2）表示前两个元素，不是吗？

table {
  border-collapse: collapse;
  border-spacing: 0
}

.prev-month,
.next-month {
  color: #cacaca
}

#Januar .next-month:nth-child(-n + 2) {
  background: none!important
}

#active {
  color: #F45537 !important;
  font-weight: 900;
}

td {
  padding: 0
}

.Januar {
  font: 87.5%/1.5em Lato, sans-serif;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%)
}

.calendar-container {
  position: relative
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #e66b6b;
  color: #fff;
  text-align: center
}

.tooltiptext {
  display: none;
}

.tooltiptext {
  display: none;
  background-color: #000;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  font-weight: 500 !important;
  opacity: 0.9;
  position: absolute;
  z-index: 1
}

.newyear .tooltiptext {
  top: 70px;
  left: 61px;
}

.sixjanuar .tooltiptext {
  top: 70px;
  left: 200px;
  width: 200px;
}

.newyear:hover .tooltiptext,
.sixjanuar:hover .tooltiptext {
  display: inline-block
}

.newyear:hover,
.sixjanuar:hover {
  cursor: pointer
}

.month {
  font-size: 25px;
  line-height: 1em;
  text-align: center;
  padding-bottom: 5px
}

.weeks {
  font-size: 10px!important
}

.weeks:hover {
  background: none!important
}

.calendar {
  background: #fcfcfc;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2px
}

.calendar thead {
  color: #e66b6b;
  font-weight: 500
}

.calendar td {
  font-size: 15px;
  padding: 5px;
  text-align: center;
  background: 1px solid #ddd !important;
}

tr td:first-child {
  font-size: 11px!important
}

.calendar tbody td:hover {
  background: #ddd;
}

.calendar tbody td:nth-last-child(-n+2) {
  background: #d5e6ff
}

.current-day {
  color: #e66b6b;
  background: #cacaca;
  font-weight: bolder
}

<table id="Januar" class="calendar">
  <thead>
    <tr>
      <td></td>
      <td>Mo</td>
      <td>Di</td>
      <td>Mi</td>
      <td>Do</td>
      <td>Fr</td>
      <td>Sa</td>
      <td>So</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="weeks">01</td>
      <td id="active" class="newyear">1<span class="tooltiptext">Neujahr<br>01.01.2018<br>gesetzlicher Feiertage</span></td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td id="active" class="sixjanuar">6<span class="tooltiptext">Heilige Drei Könige<br>06.01.2018<br>gesetzlicher Feiertag in Baden-Württemberg, Bayern, Sachsen-Anhalt</span></td>
      <td>7</td>
    </tr>
    <tr>
      <td class="weeks">02</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td class="weeks">03</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
    </tr>
    <tr>
      <td class="weeks">04</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
    </tr>
    <tr>
      <td class="weeks">05</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td class="next-month">1</td>
      <td class="next-month">2</td>
      <td class="next-month">3</td>
      <td class="next-month">4</td>
    </tr>
  </tbody>
</table>

Answer 1

我将background: none应用于第7和第8 .next-month。我希望我会为你工作。

table {
  border-collapse: collapse;
  border-spacing: 0
}

.prev-month,
.next-month {
  color: #cacaca
}

#Januar .next-month:nth-child(7),
#Januar .next-month:nth-child(8){
  background: none!important
}

#Januar .next-month:hover{
  background: none!important
}

#active {
  color: #F45537 !important;
  font-weight: 900;
}

td {
  padding: 0
}

.Januar {
  font: 87.5%/1.5em Lato, sans-serif;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%)
}

.calendar-container {
  position: relative
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #e66b6b;
  color: #fff;
  text-align: center
}

.tooltiptext {
  display: none;
}

.tooltiptext {
  display: none;
  background-color: #000;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  font-weight: 500 !important;
  opacity: 0.9;
  position: absolute;
  z-index: 1
}

.newyear .tooltiptext {
  top: 70px;
  left: 61px;
}

.sixjanuar .tooltiptext {
  top: 70px;
  left: 200px;
  width: 200px;
}

.newyear:hover .tooltiptext,
.sixjanuar:hover .tooltiptext {
  display: inline-block
}

.newyear:hover,
.sixjanuar:hover {
  cursor: pointer
}

.month {
  font-size: 25px;
  line-height: 1em;
  text-align: center;
  padding-bottom: 5px
}

.weeks {
  font-size: 10px!important
}

.weeks:hover {
  background: none!important
}

.calendar {
  background: #fcfcfc;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2px
}

.calendar thead {
  color: #e66b6b;
  font-weight: 500
}

.calendar td {
  font-size: 15px;
  padding: 5px;
  text-align: center;
  background: 1px solid #ddd !important;
}

tr td:first-child {
  font-size: 11px!important
}

.calendar tbody td:hover {
  background: #ddd;
}

.calendar tbody td:nth-last-child(-n+2) {
  background: #d5e6ff
}

.current-day {
  color: #e66b6b;
  background: #cacaca;
  font-weight: bolder
}

<table id="Januar" class="calendar">
  <thead>
    <tr>
      <td></td>
      <td>Mo</td>
      <td>Di</td>
      <td>Mi</td>
      <td>Do</td>
      <td>Fr</td>
      <td>Sa</td>
      <td>So</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="weeks">01</td>
      <td id="active" class="newyear">1<span class="tooltiptext">Neujahr<br>01.01.2018<br>gesetzlicher Feiertage</span></td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td id="active" class="sixjanuar">6<span class="tooltiptext">Heilige Drei Könige<br>06.01.2018<br>gesetzlicher Feiertag in Baden-Württemberg, Bayern, Sachsen-Anhalt</span></td>
      <td>7</td>
    </tr>
    <tr>
      <td class="weeks">02</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td class="weeks">03</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
    </tr>
    <tr>
      <td class="weeks">04</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
    </tr>
    <tr>
      <td class="weeks">05</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td class="next-month">1</td>
      <td class="next-month">2</td>
      <td class="next-month">3</td>
      <td class="next-month">4</td>
    </tr>
  </tbody>
</table>

Answer 2

以下选择器：#Januar .next-month:nth-child(-n + 2)仅在没有其他td（表格单元格）元素位于类.next-month的元素时才适用。< / p>

因此，在这种情况下，前面提到的选择器基本上是在阅读：“选择具有类.next-month 的元素如果它们是嵌入的前两个元素包含元素“。

考虑从源订单的底部计算，而不是顶部，例如：

#Januar tr .next-month:nth-last-child(n+3) {
    background: none;
}

无需!important声明。结构伪类选择器（nth-last-child）增加了足够的特异性，id选择器使用的属性足够权重以及

代码段示范：

table {
  border-collapse: collapse;
  border-spacing: 0
}

.prev-month,
.next-month {
  color: #cacaca
}

#Januar tr .next-month:nth-last-child(n+3) {
  background: none;
}

#active {
  color: #F45537 !important;
  font-weight: 900;
}

td {
  padding: 0
}

.Januar {
  font: 87.5%/1.5em Lato, sans-serif;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%)
}

.calendar-container {
  position: relative
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #e66b6b;
  color: #fff;
  text-align: center
}

.tooltiptext {
  display: none;
}

.tooltiptext {
  display: none;
  background-color: #000;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  font-weight: 500 !important;
  opacity: 0.9;
  position: absolute;
  z-index: 1
}

.newyear .tooltiptext {
  top: 70px;
  left: 61px;
}

.sixjanuar .tooltiptext {
  top: 70px;
  left: 200px;
  width: 200px;
}

.newyear:hover .tooltiptext,
.sixjanuar:hover .tooltiptext {
  display: inline-block
}

.newyear:hover,
.sixjanuar:hover {
  cursor: pointer
}

.month {
  font-size: 25px;
  line-height: 1em;
  text-align: center;
  padding-bottom: 5px
}

.weeks {
  font-size: 10px!important
}

.weeks:hover {
  background: none!important
}

.calendar {
  background: #fcfcfc;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2px
}

.calendar thead {
  color: #e66b6b;
  font-weight: 500
}

.calendar td {
  font-size: 15px;
  padding: 5px;
  text-align: center;
  background: 1px solid #ddd !important;
}

tr td:first-child {
  font-size: 11px!important
}

.calendar tbody td:hover {
  background: #ddd;
}

.calendar tbody td:nth-last-child(-n+2) {
  background: #d5e6ff
}

.current-day {
  color: #e66b6b;
  background: #cacaca;
  font-weight: bolder
}

<table id="Januar" class="calendar">
  <thead>
    <tr>
      <td></td>
      <td>Mo</td>
      <td>Di</td>
      <td>Mi</td>
      <td>Do</td>
      <td>Fr</td>
      <td>Sa</td>
      <td>So</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="weeks">01</td>
      <td id="active" class="newyear">1<span class="tooltiptext">Neujahr<br>01.01.2018<br>gesetzlicher Feiertage</span></td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td id="active" class="sixjanuar">6<span class="tooltiptext">Heilige Drei Könige<br>06.01.2018<br>gesetzlicher Feiertag in Baden-Württemberg, Bayern, Sachsen-Anhalt</span></td>
      <td>7</td>
    </tr>
    <tr>
      <td class="weeks">02</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td class="weeks">03</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
    </tr>
    <tr>
      <td class="weeks">04</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
    </tr>
    <tr>
      <td class="weeks">05</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td class="next-month">1</td>
      <td class="next-month">2</td>
      <td class="next-month">3</td>
      <td class="next-month">4</td>
    </tr>
  </tbody>
</table>