CSS:第 nth-of-type(2) 未应用于类

Question

Example page

我认为包含“学生签证”的右下角 div 会受到 CSS 的影响:

.front-page-widget-portrait2:nth-of-type(2) .second-half {
    height: 240px;
    color: #FFF;
    padding: 40.28436018% 40px 0 40px;
    position: relative;
}
.front-page-widget-portrait2:nth-of-type(2) .second-half img {
    position: absolute;
    bottom: 0;
    width: 49px;
    margin: 0 auto;
    display: inline-block;
}

它包含在 front-page-widget-portrait2 类的第二个 div 中，但是 .front-page-widget-portrait2:nth-of-type(2) 未被应用。

你能看出为什么不吗？感谢帮助。

Answer 1

你的标记是这样的

<div></div> <!-- Some more div elements around on the same level -->
<div class="front-page-widget-portrait2"></div>
<div class="front-page-widget-portrait2"></div>
<div></div> <!-- Some more div elements around on the same level -->

取而代之的是，尝试将您的 front-page-widget-portrait2 包装在另一个 div 中，例如

<div></div> <!-- Some more div elements around on the same level -->
<div class="front-page-widgets">
  <div class="front-page-widget-portrait2"></div>
  <div class="front-page-widget-portrait2"></div>
</div>
<div></div> <!-- Some more div elements around on the same level -->

现在，您可以使用像这样的选择器

.front-page-widgets > div:nth-of-type(2) .second-half {
  /* Styles goes here */
}

让我分解选择器来向您解释它是如何工作的。我们首先选择包装元素 front-page-widgets(我们刚刚创建了一个新元素)。更进一步，我们使用 > 选择直接子元素来包装元素，即 div 和 front-page-widget-portrait2 的 class 。但正如我已经提到的那样，nth- 不会尊重类，因此在选择器中使用它是没有意义的。最后，我使用 .second-half 选择第二个小部件中的第二个 block 。