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>

我想使用css伪选择器＆＃34; last-child＆＃34;选择最后<p>（其id =＆＃34;最后＆＃34;）像这样：#return-home-to p:last-child {}。

问题：我做错了什么？为什么#return-home-to p:last-child {}未选择上一个<p id="last">？

Answer 1

为什么#return-home-to p:last-child {}未选择上一个<p id="last">？

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

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

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

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

CSS伪选择器。选择最后一个<p>

1 个答案: