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后代元素作为第一个孩子。

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

您需要选择直接子div元素（使用direct child combinator, >）。这样做时，如果是第一个孩子，则只会选择div为.portlet-dropzone直接孩子的.layout__side .portlet-dropzone > div:first-child header { padding: 10px; border: 1px solid red; }元素。

Example Here

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

如标题所示，如果您还想选择最后一个：

Updated Example

:first-child

还值得指出的是，有:first-of-type和:last-of-type个伪类将通过 type 选择第一个/最后一个元素（与{{1不同） } / :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元素，这可能很有用。例如，如果在第一个h1之前有一个随机的div元素，就像上面的示例一样，仍会选择第一个div。

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

1 个答案: