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

标签 html css

大家好，这里是一个简单的日历。在底部，最后一行，最后 4 天是下个月的几天，所以我想让它们没有背景。 .他们有一个类(class):下个月，我让第 n 个 child 这样:

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

.然后我将背景应用于所有元素:

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

这是一个代码笔: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>

最佳答案

我将 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>

关于html - nth-child 不适用于前两个子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48092370/

上一篇：html - 带有图像的按钮不会位于居中文本下方

下一篇：html - 为什么我的导航栏中的文本重叠？

相关文章：

Jquery:选择 "DIV ID"和 "LI CLASS"和 "LINK"文本

html - 让列表超出屏幕边界

CSS 网格单元格不是正方形

html - 在具有背景图像的 Div 中垂直居中图像？ (没有任何工作)

css - (x)html/css : list items distributed in columns

html - 快捷方式图标 - 它们隐藏在 html 代码中的什么位置？

html - 位置绝对底部+滚动修复

javascript - 奇怪的数据表排序和按键行为

javascript - IE8 渲染错误 : after javascript visibility-toggle, div 内容保持白色

css - 简单的 CSS 框阴影

©2024 IT工具网  联系我们