:last-child 不生效解决

小白目

已于 2022-08-09 21:15:12 修改

阅读量1.7k

点赞数 2

分类专栏： css 文章标签：前端

于 2022-07-01 11:06:11 首次发布

本文链接：https://blog.csdn.net/qq_37974755/article/details/125554877

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

结构：

    <div class="titleContent">
      <div>导航点击栏</div>
      <p>{{ AthenaData.titleLabel }}</p>
      <h1>牌力觉醒 等你来斗</h1>
      <p>翻牌得门票，参赛赢好礼！</p>
      <div class="ticketInfo">
        我的入场券
        <span>初赛：1</span>
        <span>复赛：0</span>
        <span>决赛：0</span>
        <button>立即开斗</button>
      </div>
    </div>

想给 <p>翻牌得门票，参赛赢好礼！</p> 文字加粗：

样式：

p:last-child{
    font-weight: 700;
}

发现不生效。

解决办法：

p:last-of-type{
    font-weight: 700;
}

总结：

        p:first-of-type ：同级结构内首次出现的P元素（无须在结构第一位）

        p:last-of-type ：同级结构内最后出现的P元素（无须在结构倒数第一位）

        p:first-child ：父元素下的第一个P元素（必须在结构第一位）

        p:last-child ：父元素（body除外）下的最后一个P元素（必须在结构倒数第一位）

此外，以上为伪类！伪元素只有下面几个：