关于:last-child的一点见解

今天在公司的总结中有个同事提了一个很有意思的代码，是关于p:last-child的问题

源码是这样的：

想要的效果是这样的

 <style>

   p:last-chlid{

    background-color:red;

}

</style>

  <div>

     <p>行一</p>

     <p>行二</p>

     <p>行三</p>

</div>

 

行1

行二

行三

以下是对比案列

 <style>

   p:last-chlid{

    background-color:red;

}

</style>

  <div>

     <p>行一</p>

     <p>行二</p>

     <p>行三</p>

     <span>行内1</span>

</div>

行一

行二

行三

行内1

这里最后一个p元素没有发生颜色变化，原因是:last-child(注意这里是紧挨元素的，而不是有空格隔开的)是指匹配的对象是其所在的父元素的最后一个元素，这里的的最后一个元素是span,而不是p,

如果这里要匹配最后一个p元素，可以使用 p:last-of-type

如下面：

 

.demo2 p:last-of-type{
color:yellow
}

 

<div class="demo2">

     <p>1</p>

     <p>2</p>

     <p>3</p>

     <span>4</span>

</div>

1

2

3

4