使用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中的同一個類

回答

相關問題