使用ul/li中的同一个类

我有这段代码用于页脚。页脚需要为名称为“SERVICE AGREEMENT/PRIVACY POLICY”的最后一项拥有不同的样式。是否可以使用同一个类并获取代码，我的意思是不使用像我所做的那样的不同类。使用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>

来源

2010-09-09 Sachindra

你喜欢支持哪些浏览器？ – kennytm 2010-09-09 11:08:56

当然所有的浏览器和最新版本..毫无疑问.. – Sachindra 2010-09-09 11:10:14

“所有的浏览器”所以你的意思是IE1 +，Firefox 0.9 +，等等......？更具体的帮助是因为浏览器CSS支持非常粗糙。 – BoltClock 2010-09-09 11:13:28

这样做的一个简单的方法：

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

来源

2010-09-09 11:10:24 marcgg

这也使用'.footer_content li'而不是在所有的li上都有相同的类，这样会更干净。 – Svish 2010-09-09 11:14:35

不太了解

可以使用伪类:last-child但这不是在所有的浏览器所接受。

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

来源

2010-09-09 11:10:17 Ross

你会更好地给它自己的类。有：最后一个孩子，但它不能在Internet Explorer中工作

来源

2010-09-09 11:10:28 Paul

最新的工作方式是什么？ – Sachindra 2010-09-09 11:19:26

除非你通过Javascript来做，否则你可以做的不多。你有什么理由不想给它额外的课程吗？这将比任何其他方式更简单。 – Paul 2010-09-09 12:34:11

谢谢保罗，但我需要这些东西（里面的文本里面的标签）来自数据库..所以我只需要把标签放在一个循环中......这给了我最后一个不同类的选择标记.... – Sachindra 2010-09-09 13:41:49

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

来源

2010-09-09 11:11:14

的标准方式：

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

选择李项：

#footer li { ... }

选择最后李项：

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

Internet Explorer不执行：最后一个孩子伪类。对于这个问题的一个解决方案是：

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

现在你可以选择最后李象这样：

#footer li.last { ... }

来源

2010-09-09 11:17:12

很多人都认为最后的孩子，将工作，在某些浏览器。

但是，如果你问我，这在语义上是没有意义的。你希望对'政策'给予不同的看法，而不是'最后的项目'，即使它们在这种情况下碰巧是一回事。所以我建议使用一个类。您可以使用多个类，因为策略条目既是页脚内容项目又是策略项目。

<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：我用破折号，而不是下划线，因为有些浏览器在使用中类下划线的问题。

来源

2010-09-09 12:52:43

使用ul/li中的同一个类

回答

相关问题