CSS 伪选择器。 Select 最后 <p>

Question

这是我的代码：

<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>

我想 select 最后 <p> （它有 id="last"）使用 css 伪 select 或 "last-child" 之类的这个：#return-home-to p:last-child {}.

问题：我做错了什么？为什么 #return-home-to p:last-child {} 不会 select 最后 <p id="last">？

Answer 1

Why #return-home-to p:last-child {} does not select last <p id="last">?

没有 select 编辑，因为最后一个子元素不是 p 元素。

在这种情况下，#return-home-to 的最后一个子元素是带有 class sq-outline-btn 的锚元素，这解释了为什么 p 元素不是 selected.

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

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

CSS 伪选择器。 Select 最后 <p>

CSS pseudo selector. Select last <p>

css

css-selectors

pseudo-element