CSS 伪选择器。选择最后一个 答案

【问题标题】：CSS pseudo selector. Select last CSS 伪选择器。选择最后一个 
【发布时间】：2016-04-17 14:44:50
【问题描述】：

这是我的代码：

<section id="return-home-to">
   <div class="gutter">
    <h2 class="return-home-heading">
     Возвращайтесь в дом, свободный от хлопот
    </h2>

    <img src="img\icons\letter.png" alt="" class="icon" />
    <p>
     ПОЧТА ОТПРАВЛЕНА
    </p>

    <img src="img\icons\tape.png" alt="" class="icon" />
    <p>
     ОДЕЖДА И ОБУВЬ ОТРЕМОНТИРОВАНА
    </p>

    <img src="img\icons\lawn.png" alt="" class="icon" />
    <p>
     СПЕЦИАЛЬНЫЕ ЗАПРОСЫ
    </p>

    <img src="img\icons\dishes.png" alt="" class="icon" />
    <p id="last">
     ПОРЯДОК ДОМОВОГО: КРОВАТИ ЗАСТЕЛЕНЫ И ПОСУДА ПОМЫТА
    </p>

    <div class="info">
     <div class="triangle">
     </div>
     <div class="square">
      <a href="#">i</a>
     </div>
    </div>

    <a href="#" class="sq-outline-btn">ПОРУЧИТЬ ЗАДАНИЯ</a>
   </div>
  </section>

我想使用 css 伪选择器“last-child”选择最后一个 （id="last"），如下所示：#return-home-to p:last-child {}。

问题：我做错了什么？为什么#return-home-to p:last-child {} 不选择最后一个？

【问题讨论】：

标签： css css-selectors pseudo-element

【解决方案1】：

为什么#return-home-to p:last-child {} 没有选择最后一个？

没有选择任何内容，因为最后一个子元素不是 p 元素。

在这种情况下，#return-home-to 的最后一个子元素是类 sq-outline-btn 的锚元素，这解释了为什么没有选择 p 元素。

如果您想根据其类型选择最后一个元素，请改用:last-of-type pseudo class。顾名思义，它将选择特定类型的最后一个元素。

#return-home-to p:last-of-type {}

【讨论】：