.post p:last-child和.post :last-child的区别

源自：6-7 CSS3 结构性伪类选择器—last-child

.post p:last-child和.post :last-child的区别

不明白的 .post p:last-child和.post :last-child有什么区别，效果不都是一样的吗

提问者：慕莱坞9334362 2018-09-04 16:01

个回答

小鲨鱼e

2018-09-05 11:30:47

已采纳

:last-child (选择父元素的最后一个子元素)
  <style>
   .post:last-child{/*有效，标签里所有元素*/
    color:pink;
   }
   .post div:last-child{/*如果最后一个标签是<div>的时候，它就有效*/
     color:blue;
   }
   .post p:last-child{/*如果最后一个标签是<p>的时候，它就有效*/
     color: red;
   }
   .post a:last-child{
    color: orange;/*如果最后一个标签是<a>的时候，它就有效*/
   }
</style>
</head>
<body>
   <div class="post">
     <p>我是p-1</p>
     <p>我是p-2</p>
     <p>我是p-3</p>
     <div>我是div-1</div>
     <p>我是p-4</p>
     <p>我是p-5</p>
     <div>我是div-2</div>
     
   </div>

</body>

1