2012-07-31 16 views
11

根據http://api.jquery.com/category/selectors/我們可以在jQuery中使用大量的CSS選擇器,那裏沒有提到:nth-last-child()。然而,當我測試以下(使用jQuery 1.7.1從谷歌),但實際上,而不是在IE 8仿真模式IE 9作用於火狐,Chrome和IE 9:jQuery真正支持哪些CSS3選擇器:第n-最後孩子()?

$('li:nth-last-child(2)').css('color', 'red'); 

那麼,什麼是發生了什麼?它看起來好像jQuery生成的CSS代碼,如li:nth-last-child(2) { color: red },並以某種方式注入它,然後在支持使用選擇器的瀏覽器上工作正常。但那會很奇怪。

最重要的是,是否有一些技巧讓jQuery支持所有瀏覽器上的這種選擇器?

回答

34

儘管jQuery在其home page上宣稱符合Selectors level 3標準,但它並未完全實現該規範。在它自己的Selectors文檔中,它闡明它「從CSS 1-3中」[借用],然後[添加]自己的「選擇器」。

從jQuery的1.9開始,實質上在水平3標準中的所有選擇器由Sizzle(其基礎選擇器庫)的支持,但有以下例外:

以下3級選擇are implemented in jQuery 1.9 and newer,但的jQuery 1.8或以上:

此外:

  • :lang(),在CSS2推出,也不翼而飛。

爲什麼你選擇出現在Firefox中工作的原因,Chrome和IE9是因爲jQuery首先經過選擇的字符串到本地document.querySelectorAll()實施回落喜人景象了。由於它是一個有效的CSS選擇器,document.querySelectorAll()將成功返回jQuery使用的節點列表,從而避免使用Sizzle。

如果document.querySelectorAll()失敗,jQuery會自動回退到Sizzle。有許多的場景,可能會導致它失敗:

  • 的選擇是無效的,不支持,否則無法使用(見Selectors API spec瞭解詳細信息)。

  • document.querySelectorAll()方法本身是不支持(jQuery的實際上一個簡單的測試,這個if語句,因此不會在這個詞的這個意義上失敗,但你得到的圖片)。

在你的情況,雖然IE9和IE8實施document.querySelectorAll(),IE8不支持:nth-last-child()。由於jQuery/Sizzle也沒有實現:nth-last-child(),所以沒有使用回退行爲,導致IE8完全失敗。

如果你至少不能將jQuery更新爲1.9(向後兼容的發佈分支),你總是可以使用自定義選擇器擴展來自己實現缺少的僞類。但是,由於jQuery 1.9增加了對上述選擇器的支持,同時保持了與舊IE版本的兼容性,如果您需要兼容性,最好最低限度地更新到該版本。


它支持:contains(),在this old CR revision of the spec後來被丟棄,以及從標準延伸:not()前的最後定義。在this question中涵蓋了jQuery實現和當前標準的區別。

一些其他的選擇(如+~兄弟組合程序,:empty:lang()和一些CSS2的屬性選擇)就要被jQuery的早期發育過程以及下降,只是因爲John Resig didn't think anybody would use them。幾乎所有的人都在進行了更多的測試之後才進入最終版本。如上所述,:lang()是唯一一個從未在1.9之前發佈過的版本。

+1

當然,應該指出的是,jQuery選擇可以使用擴展:'$ .expr [ ':'] [ '第n個最後一個孩子'] =函數(){...};' – zzzzBov 2012-07-31 17:09:12

+0

@ zzzzBov:感謝您的提醒!我已經提到,在編輯中,現在我正試圖想出自己的實現... – BoltClock 2012-07-31 17:43:25

+0

@BoltClock它在http://api.jquery.com/nth-of-type-選擇器/ _it「[借用]從CSS 1-3,然後[添加]自己的」選擇器._ – 2013-01-21 09:28:29