我在选择以下html标记的第一个和最后一个div时遇到问题：
<div class="layout__side">
<div class="portlet-dropzone">
<div id="id1">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id2">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id1 div-->
<div id="id3">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id4">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id3 div-->
<div id="id5">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id6">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id5 div-->
<div id="id7">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id8">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id7 div-->
<div id="id9">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id10">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id9 div-->
<div id="id11">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id12">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id11 div-->
</div><!--end portlet-dropzone-->
</div><!--end layout__side-->
我试图只选择和样式id1 div标头,而不使用div id明确选择它.我尝试使用div：first-child选择器,但所有的div都被选中了！这就是我尝试过的,以及使用nth-child(1)
.layout__side .portlet-dropzone div:first-child header{
padding: 10px;
border: 1px solid red;
}
解决方法
问题是你选择了第一个孩子的所有div后代元素.
换句话说,选择了后代div元素.portlet-borderless-container,.portlet-body和.inner(因为它们是.portlet-dropzone的后代,它们是相对于其父元素的第一个子元素).由于选择了所有div元素,因此选择和设置每个标题元素.
您需要选择直接子div元素(使用direct child combinator,>).这样做时,如果它是第一个子节点,则只选择作为.portlet-dropzone的直接子节点的div元素.
.layout__side .portlet-dropzone > div:first-child header {
padding: 10px;
border: 1px solid red;
}
如标题所示,如果您还想选择最后一个：
.layout__side .portlet-dropzone > div:first-child header,.layout__side .portlet-dropzone > div:last-child header {
padding: 10px;
border: 1px solid red;
}
值得指出的是,:first-of-type和:last-of-type伪类将按类型选择第一个/最后一个元素(不像：first-child /：last-child,它将仅根据索引而不是类型进行选择).
.layout__side .portlet-dropzone > div:first-of-type header,.layout__side .portlet-dropzone > div:last-of-type header {
padding: 10px;
border: 1px solid red;
}
如果存在不同类型的元素并且您只想定位div元素,这可能很有用.例如,如果在第一个div之前有一个随机的h1元素,就像上面的例子一样,仍然会选择第一个div.
