今天繼續分享jq入門基礎。

css選擇符

jQuery支持CSS規范1到規范3中的幾乎所有選擇符，具體內容可以參考W3C網站。這種對CSS選擇符的支持，使得開發者在增強自己的網站時，不必為哪種瀏覽器不理解某種不太常用的選擇符而擔心，只要該瀏覽器啟用了JavaScript就沒有問題。

漸進增強負責任的jQuery開發者應該在編寫自己的程序時，始終堅持漸進增強和平穩退化的理念，做到在JavaScript禁用時，頁面仍然能夠與啟用JavaScript時一樣準確地呈現。為了學習在jQuery中如何使用CSS選擇符，我們選擇了一個很多網站中都會有的通常用于導航的結構——嵌套的無序列表。

<ul id="selected-plays"> <li>Comedies <ul> <li><a href="/asyoulikeit/">As You Like It</a></li> <li>All's Well That Ends Well</li> <li>A Midsummer Night's Dream</li> <li>Twelfth Night</li> </ul> </li> <li>Tragedies <ul><li><a href="hamlet.pdf">Hamlet</a></li> <li>Macbeth</li> <li>Romeo and Juliet</li> </ul> </li> <li>Histories <ul> <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) <ul> <li>Part I</li> <li>Part II</li> </ul> <li><a href="http://www.shakespeare.co.uk/henryv.htm"> Henry V</a></li> <li>Richard II</li> </ul> </li> </ul>

基于列表項的級別添加樣式

假設我們想讓頂級的項，而且只有頂級的項水平排列，那么可以先在樣式表中定義一個horizontal類：

.horizontal { float: left; list-style: none; margin: 10px; }

這個horizontal類會將元素浮動到它后面元素的左側，如果這個元素是一個列表項，那么 會移除其項目符號，最后再為該元素的每一邊各添加10像素的外邊距。這里，我們沒有直接在HTML中添加horizontal類，而只是將它動態地添加給位于頂級的列表項Comedies、Tragedies和Histories，以便示范jQuery中選擇符的用法。

$(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); });

當在jQuery代碼中使用$(document).ready()時，位于其中的所有代碼都會在DOM加載后立即執行。 要為其他項（非頂級的項）添加樣式，有很多種方式。因為已經為頂級項添加了horizontal類，所以取得全部非頂級項的一種方式，就是使用否定式偽類選擇符來識別沒有horizontal類的所有列表項。

$(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level'); });

這一次取得的每個列表項（）：是ID為selected-plays的元素（#selected-plays）的后代元素。沒有horizontal類（:not(.horizontal)。在為這些列表項添加了sub-level類之后，它們的背景顏色變為在樣式表規則中定義的淺灰色。

.sub-level { background: #ccc; }

此時的嵌套列表是上圖這樣的

總結

以上是生活随笔為你收集整理的jq 点击导航添加背景_jq入门（2）css选择符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。