html - 在 ul/li 中使用相同的类

Question

我的页脚有这段代码。页脚需要为名称为“服务协议(protocol)/隐私政策”的最后一项采用不同的样式。是否可以使用相同的类并获取代码，我的意思是不像我所做的那样使用不同的类？

<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*/
}