Какие селектора CSS3 действительно поддерживают jQuery, например: nth-last-child ()?

Хотя jQuery рекламирует соответствие стандарту 3 уровня выбора на своей домашней странице , он не полностью реализует спецификацию. В своей собственной документации Selectors он поясняет, что он «[занимает] из CSS 1-3, а затем [добавляет] свои собственные« селектора ». ¹

Начиная с jQuery 1.9, практически все селекторы стандарта уровня 3 поддерживаются Sizzle (его основной селекторной библиотекой) со следующими исключениями:

• jQuery не может выбирать псевдоэлементы, поскольку они являются абстракциями на основе CSS дерева документов, которые не могут быть выражены через DOM .

• jQuery не может разрешать динамические псевдоclassы, такие как :link / :visited для гиперссылок и :hover :active и :focus для взаимодействия с пользователем. Последний набор псевдоclassов, в частности, основан на состоянии, а не на событиях, поэтому вам нужно использовать обработчики событий, а не псевдоclassы для запуска кода, когда элементы входят и покидают эти состояния. См. Этот ответ для объяснения.

• jQuery также не может разрешить префиксы пространства имен, поскольку он не поддерживает размещение имен в CSS .

Следующие селектора уровня 3 реализованы в jQuery 1.9 и новее , но не jQuery 1.8 или старше ² :

• :target
• :root
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-of-type
• :last-of-type
• :only-of-type

Дополнительно:

• :lang() , введенное в CSS2, также отсутствует.

Причина, по которой ваш селектор работает в Firefox, Chrome и IE9, состоит в том, что jQuery сначала передает строку выбора в исходную реализацию document.querySelectorAll() прежде чем вернуться к Sizzle. Так как это допустимый селектор CSS, document.querySelectorAll() успешно вернет список узлов для использования jQuery, тем самым устраняя использование Sizzle.

В случае неудачи document.querySelectorAll() , jQuery автоматически возвращается к Sizzle. Существует ряд сценариев, которые могут привести к сбою:

• Селектор недействителен, не поддерживается или иным образом не может использоваться (подробности см. В спецификации API Selectors ).

• Сам метод document.querySelectorAll() не поддерживается (jQuery фактически проверяет это с помощью простого оператора if, поэтому он не терпит неудачу в этом смысле этого слова, но вы получаете изображение).

В вашем случае, хотя IE9 и IE8 реализуют document.querySelectorAll() , IE8 не поддерживает :nth-last-child() . Поскольку jQuery / Sizzle не реализует :nth-last-child() либо, нет никакого резервного поведения для использования, что приводит к полному сбою в IE8.

Если вы не можете обновить jQuery до 1,9 даже, по крайней мере, (ветвь с поддержкой обратной совместимости), вы всегда можете использовать пользовательские расширения селектора, чтобы самостоятельно реализовать отсутствующие псевдоclassы. Однако, поскольку jQuery 1.9 добавляет поддержку вышеперечисленных селекторов при сохранении совместимости со старыми версиями IE, лучше всего обновить эту версию как минимум, если вам нужна совместимость.

¹ _{Он поддерживает :contains() , последний определенный в этой старой ревизии CR спецификации перед тем, как быть опущен позже, а также расширение :not() из стандарта. Различия между реализацией jQuery и текущим стандартом рассматриваются в этом вопросе .}

² _{Несколько других селекторов (например, комбинаторы + и ~ sibling :empty :lang() и некоторые селектора атрибутов CSS2) также должны были быть удалены и во время ранней разработки jQuery, просто потому, что Джон Ресиг не думал, что кто-нибудь будет использовать их . Почти все из них вошли в финальный релиз после того, как было сделано еще несколько тестов. :lang() был единственным, кто никогда не делал этого в релизе до 1.9, как указано выше.}