我无法为以下 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 header 并设置样式,而不是使用 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
元素,因此选择了每个 header
元素并设置了样式。
您需要改为选择直接子 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
伪类,它将通过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
仍将被选中。
关于html - CSS 选择器 - 如何选择第一个和最后一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35214303/