包含“学生签证”的右下方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)
未被应用。
你能明白为什么不呢?帮助赞赏。
答案 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
选择第二个小部件中的第二个块。