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第一个孩子的后代元素.

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

您需要选择直接子div元素(通过使用直接子组合子>).这样做时,如果它是第一个子节点,则只选择div直接子节点元素.portlet-dropzone.

这里的例子

.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.例如,如果h1在第一个之前存在随机元素div,就像在上面的示例中div那样,仍然会选择第一个元素.