Html 在ul/li中使用相同的类

我的页脚有一段代码。页脚需要为最后一个名为“服务协议/隐私策略”的项目使用不同的样式。。是否可以使用同一个类并获得代码，我的意思是不使用我所做的不同的类

<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>

我不太明白

您可以使用psuedo类

：last child

，但并非所有浏览器都接受这一点

JQUERY或类似工具可用于将特定类应用于特定元素。

我不太明白

您可以使用psuedo类

：last child

，但并非所有浏览器都接受这一点

---

JQUERY或类似工具可用于将特定类应用于特定元素。

一种更简单的方法：

<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的浏览器上不起作用，这意味着旧的IEs等等

如果您需要完全区分“正常”和“最后一个”，请执行以下操作：

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

.footer\u content.item{
/*风格*/
}
.footer\u content.last{
/*风格*/
}

一种更简单的方法：

<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的浏览器上不起作用，这意味着旧的IEs等等

如果您需要完全区分“正常”和“最后一个”，请执行以下操作：

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

.footer\u content.item{
/*风格*/
}
.footer\u content.last{
/*风格*/
}

您最好给它自己的类。有：最后一个孩子，但它在Internet Explorer中不起作用

你最好给它上自己的课。有：最后一个孩子，但它在Internet Explorer中不起作用。

如果它只是一个李，你可以给它一个id，并且仍然保持与其他李相同的类。

如果它只是一个李，你可以给它一个id，并且仍然保持与其他李相同的类。

标准方式：

<ul id="footer">
    <li> standard LI </li>
    <li> standard LI </li>
    <li> standard LI </li>
    <li> special LI </li>
</ul>

选择最后一个LI项目：

#foter li:last-child { ... }

Internet explorer未实现：last child伪类。解决这个问题的一个办法是：

<ul id="footer">
    <li> standard LI </li>
    <li> standard LI </li>
    <li> standard LI </li>
    <li class="last"> special LI </li>
</ul>

标准方式：

<ul id="footer">
    <li> standard LI </li>
    <li> standard LI </li>
    <li> standard LI </li>
    <li> special LI </li>
</ul>

选择最后一个LI项目：

#foter li:last-child { ... }

Internet explorer未实现：last child伪类。解决这个问题的一个办法是：

<ul id="footer">
    <li> standard LI </li>
    <li> standard LI </li>
    <li> standard LI </li>
    <li class="last"> special LI </li>
</ul>

---

很多人建议最后一个孩子，这在一些浏览器中是可行的

但如果你问我的话，这在语义上是没有意义的。您希望对“策略”赋予不同的外观，而不是“最后一项”，即使在本例中它们恰好是同一事物。所以我建议使用一个类。您可以使用多个类，因为策略条目既是页脚内容项又是策略项

<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-item policy"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

---

ps：我用破折号代替下划线，因为有些浏览器在类中有下划线的问题。

很多人都建议使用最后一个孩子，这在某些浏览器中是可行的

但如果你问我的话，这在语义上是没有意义的。您希望对“策略”赋予不同的外观，而不是“最后一项”，即使在本例中它们恰好是同一事物。所以我建议使用一个类。您可以使用多个类，因为策略条目既是页脚内容项又是策略项

<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-item policy"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

---

ps：我用破折号代替下划线，因为有些浏览器在类中有下划线问题。

您喜欢支持哪些浏览器？当然，所有浏览器和最新版本都是如此。。毫无疑问，“所有浏览器”那么你是指IE1+、Firefox 0.9+等等。。。？更具体一些会有帮助，因为浏览器CSS支持非常粗糙。我尝试了代码。。它在IE 8中不起作用。。。。。但在其他方面做得很好。。。mozilla。。safari和chrome…@Sacindra：你需要更多信息才能接受答案吗？你喜欢支持哪些浏览器？当然，所有的浏览器和最新版本。。毫无疑问，“所有浏览器”那么你是指IE1+、Firefox 0.9+等等。。。？更具体一些会有帮助，因为浏览器CSS支持非常粗糙。我尝试了代码。。它在IE 8中不起作用。。。。。但在其他方面做得很好。。。mozilla。。safari和chrome…@sachindra:你需要更多信息才能接受答案吗？这也使用

.footer\u content li

而不是在所有li上使用相同的类，这更干净。这也使用

.footer\u content li

而不是在所有li上使用相同的类，这要干净得多。除非你通过Javascript来做，否则你做不到什么。你有什么理由不想给它上额外的课吗？这将比任何其他方法都简单。谢谢paul，但我需要这些东西（li标签中的文本）来自数据库。。所以我只需要把标签放在一个循环中。。。。这给了我一些选择，让我可以为最后一个li标记创建一个不同的类……检查一下你是否在循环的末尾，然后添加最后一个li类。除非你通过Javascript实现，否则你做不到什么。你有什么理由不想给它上额外的课吗？这将比任何其他方法都简单。谢谢paul，但我需要这些东西（li标签中的文本）来自数据库。。所以我只需要把标签放在一个循环中。。。。对于最后一个li标记，这为我提供了一些不同类的选项……请检查是否处于循环的末尾，然后添加最后一个li类。