zoukankan      html  css  js  c++  java
  • (CSS):last-child与:last-of-type区别

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>last-child 和 last-of-type区别</title>
    <style type="text/css">
    p:last-child{
    color: red;
    }

    p:last-of-type{
    color: blue;
    }

    </style>
    </head>
    <body>
    <div>
    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <span>我是测试行</span>
    </div>
    </body>
    </html>

    运行的结果显示:没有任何一行显示为红色,第三行显示为蓝色。或许你可能会觉得两个选择器选中的是同一行,但是当你注释掉蓝色选择器的时候会发现,红色依然未被选中。

    其实红色未被选中的原因很简单,上篇文章已经讲过,这里简单的描述一下

    :last-child选择父节点最后一个子节点,并且与选择器进行匹配, 父节点div的最后一个节点是span,而匹配的选择器是p,两者不对应所以匹配不上。

    而另外一个选择器

    :last-of-type是从父节点的子节点中寻找最后一个与选择器相同的子节点,也就是说,这次寻找的并不是最后一个节点,而是最后一个P元素节点,所以只能找到第三行了。

  • 相关阅读:
    ORM框架
    优酷项目1
    新年第一天
    前端第十天
    前端第九天
    前端第八天
    前端第七天
    前端第六天
    前端第五天
    月亮与六便士
  • 原文地址:https://www.cnblogs.com/xzybk/p/12532931.html
Copyright © 2011-2022 走看看