html - CSS 选择器 - 如何选择第一个和最后一个 div

Question

我无法为以下 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;
}

Answer 1

问题是您要选择作为第一个子元素的所有 div 后代 元素。

换句话说，后代 div 元素 .portlet-borderless-container、.portlet-body 和 .inner 被选中(因为它们是 .portlet-dropzone 的后代，并且它们是相对于其父元素的第一个子元素)。由于选择了所有 div 元素，因此选择了每个 header 元素并设置了样式。

您需要改为选择直接子 div 元素(通过使用 direct child combinator, > )。这样做时，只有作为 .portlet-dropzone 的直接子元素的 div 元素(如果它是第一个子元素)才会被选中。

Example Here

.layout__side .portlet-dropzone > div:first-child header {
    padding: 10px;
    border: 1px solid red;
}

正如你的标题所暗示的，如果你也想选择最后一个:

Updated Example

.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 将基于仅索引而不是类型)。

Updated Example

.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 仍将被选中。