Question

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

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

Answer 2

很多人都建议使用last-child，这在某些浏览器中会起作用。

但是，如果你问我，那在语义上是没有意义的。您希望对“政策”给出不同的外观，而不是“最后一项”，即使它们恰好在这种情况下是相同的。所以我建议使用一堂课。您可以使用多个类，因为策略条目既是页脚内容项又是策略项。

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

然后在你的css中：

.footer-content-item{

}

.policy{
  color: silver;
}

ps：我使用破折号而不是下划线，因为某些浏览器在类中有下划线问题。

Answer 3

不太明白

您可以使用psuedo类:last-child，但并非所有浏览器都接受此类。

可以使用JQUERY或类似方法将特定类应用于特定元素。

Answer 4

你最好把它给自己的班级。有：last-child但它在Internet Explorer中不起作用

Answer 5

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

Answer 6

标准方式：

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

选择LI项目：

#footer li { ... }

选择最后一个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>

现在你可以像这样选择最后一个LI：

#footer li.last { ... }

在ul / li中使用相同的类

6 个答案: