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

时间:2017-03-22 03:53:28

标签: css

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;
}

enter image description here

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

你能明白为什么不呢?帮助赞赏。

1 个答案:

答案 0 :(得分:0)

你的标记是这样的

<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 class front-page-widget-portrait2。但正如我已经提到的那样nth-不会尊重类,所以在选择器中使用它是没有意义的。最后,我使用.second-half选择第二个小部件中的第二个块。