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 标头并为其设置样式，而不使用 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 descendant 元素，它们是第一个子元素。

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

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

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。