在ul/li中使用相同的类

Question

我的页脚有这段代码.页脚需要为最后一个项目设置不同的样式,名称为"SERVICE AGREEMENT/PRIVACY POLICY"..是否可以使用相同的类并获取代码,我的意思是不像我所做的那样使用不同的类？

<ul class="footer_content">
 <li class="footer_content_item"><a href="#">HOME</a></li>
 <li class="footer_content_item"><a href="#">ABOUT US</a></li>
 <li class="footer_content_item"><a href="#">CONTACT US</a></li>
 <li class="footer_content_item"><a href="#">SERVICES</a></li>
 <li class="footer_content_item1"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

Answer 1

一种更简单的方法:

<ul class="footer_content">
 <li><a href="#">HOME</a></li>
 <li><a href="#">ABOUT US</a></li>
 <li><a href="#">CONTACT US</a></li>
 <li><a href="#">SERVICES</a></li>
 <li class="last"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

.footer_content li{
  /*style*/
}

.footer_content .last{
  /*style*/
}

使用CSS3:

.footer_content li:last-child {}

...但这不适用于不支持CSS3的浏览器,这意味着旧的IE等等.

如果您需要完全区分"正常" <li>和"最后" <li>,请执行以下操作:

<ul class="footer_content">
 <li class="item"><a href="#">HOME</a></li>
 <li class="item"><a href="#">ABOUT US</a></li>
 <li class="item"><a href="#">CONTACT US</a></li>
 <li class="item"><a href="#">SERVICES</a></li>
 <li class="last"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

.footer_content .item{
  /*style*/
}

.footer_content .last{
  /*style*/
}