我想知道是否可以通过堆叠伪类来定位元素。
我试过这个:
#advertise .row:first-of-type .one-third:nth-of-type(2) .contentwrap {
font-size:16px;
}
但它仅在我们使用行的 ID [#one 或 #two] 代替 .row:first-of-type/.row:last-of-type 时有效
这是因为我无法使用多个伪元素来定位元素,还是我只是在做一些愚蠢的事情而没有意识到?
这是 HTML:
<div id="advertise">
<h1 class="maintitle"></h1>
<h2 class="maintitle-sub"></h2>
<div class="contentwrap">
<p></p>
</div>
<div class="row" id="one">
<div class="one-third first shadow">
<h1 class="header"></h1>
<div class="contentwrap">
<p></p>
</div>
</div>
<div class="one-third shadow">
<h1 class="header"></h1>
<div class="contentwrap">
<p></p>
</div>
</div>
<div class="one-third shadow">
<h1 class="header"></h1>
<div class="contentwrap">
<p></p>
</div>
</div>
</div>
<div class="row" id="two">
<div class="one-third first shadow">
<h1 class="header"></h1>
<div class="contentwrap">
<p></p>
</div>
</div>
<div class="one-third shadow">
<h1 class="header"></h1>
<div class="contentwrap">
<p></p>
</div>
</div>
<div class="one-third shadow">
<h1 class="header"></h1>
<div class="contentwrap">
<p></p>
</div>
</div>
</div>
</div>
最佳答案
:first-of-type
选择器选择特定类型元素的第一个实例(例如 <div>
)。在这里,你的第一个.row
元素是第二个 <div>
元素,因此你的 :first-of-type
选择器不选择它。
相反,您可以使用:
#advertise .row:nth-of-type(2) .one-third:nth-of-type(2) .contentwrap {
font-size:16px;
}
但是因为它已经有一个 id
属性(对于那个元素应该是唯一的),你不妨坚持:
#advertise #one .one-third:nth-of-type(2) .contentwrap {
font-size:16px;
}
关于html - 使用多个伪类/元素的元素的 CSS 路径不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40722642/