last-child 选取不到指定元素,失去效果

例子:
.package_desc p:last-child{color: #56a79e;}
<ul>
  <li>
    <img src="./images/package.png">
    <div class="package_desc">
      <h1>乐享套餐(男)</h1>
      <p>本套餐适用于需要进行普检的用户</p>
      <p>原价¥600</p>
      <p>适用于24家体检中心</p>
      <span >¥319</span>
    </div>
  </li>
</ul>

p:last-child可以理解为时p元素并且是最后一个元素,代码中最后一个元素是span所以没作用。
可以用last-of-type,即:package_desc p:last-of-type{color: #56a79e;}。这样可以找到最后一个指定类型的元素。

如果想让倒数第二个<p></p>里面的内容变成蓝色,怎么写css呢?
可以这样.package_desc p:nth-last-of-type(2){color: #00F;}
posted @ 2017-05-22 14:07  Dios  阅读(251)  评论(0编辑  收藏  举报