为什么最后一个子选择器在CSS中不起作用?[已关闭]

wfsdck30  于 2023-01-03  发布在  其他
关注(0)|答案(1)|浏览(121)

昨天关门了。
Improve this question
每个child都在工作,但:last-child不工作?为什么?

p:first-child {
  background-color: darkcyan;
}

p:nth-child(4) {
  background-color: aqua;
}

p:last-child {
  background-color: darksalmon;
}
<body>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid, vel!</p>
  <p>Odit eveniet molestias praesentium provident ab illum doloribus excepturi quod.</p>
  <p>Quia voluptas iusto itaque minus cupiditate repudiandae labore, hic delectus.</p>
  <p>Voluptatum perspiciatis temporibus molestias alias labore voluptates est, aliquid iste.</p>
  <p>Obcaecati amet corrupti quia commodi eveniet eaque incidunt natus official</p>
</body>
dojqjjoe

dojqjjoe1#

它必须有一个容器,就像这样:

p:first-child {
  background-color: darkcyan;
}

p:nth-child(4) {
  background-color: aqua;
}

#container p:last-child {
  background-color: darksalmon;
}
<body>
  <div id="container">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid, vel!</p>
    <p>Odit eveniet molestias praesentium provident ab illum doloribus excepturi quod.</p>
    <p>Quia voluptas iusto itaque minus cupiditate repudiandae labore, hic delectus.</p>
    <p>Voluptatum perspiciatis temporibus molestias alias labore voluptates est, aliquid iste.</p>
    <p>Obcaecati amet corrupti quia commodi eveniet eaque incidunt natus official</p>
  </div>
</body>

否则它必须是last-of-type,如下所示:
一个二个一个一个

相关问题