Упорядочение простых селекторов в последовательности

порядок может иметь значение для скорости для селекторов jQuery. Я сделал тест см. Этот тест jsperf за это, и получается, что только с помощью ID-это быстрый (не удивительно), и селектор атрибута сначала медленный, немного. Остальные очень похожи.

обратите внимание, что мне пришлось удалить :hover селектор для jQuery, так как это чисто CSS вещь AFAIK.

обратите внимание, что, как говорится в ответе Эммануэля, CSS2.1 имеет небольшие терминологические отличия от текущий уровень 3 стандарт, поэтому я бы рассмотрел CSS2.1 определения устарели. Синтаксис остается почти таким же, но терминология более определенная: простой селектор теперь всегда относится к любому одному компоненту в каждой из того, что теперь известно как простые последовательности селекторов, или еще лучше,составные селекторы.

вот та же цитата из стандарта уровня 3, только с соответствующими битами:

4. Синтаксис селектора

A последовательность простых селекторов представляет собой цепочку простых селекторов, не разделенных комбинатором. Он всегда начинается с селектора типов или универсального селектора. Никакой другой селектор типа или всеобщий селектор не позволены в последовательности.

A простой селектор либо селектор типов, универсальный селектор, атрибут селектор, селектор класса, ID-селектор, или псевдо-класса.

в отличие от CSS2.1, эта спецификация не использует фразу "в любом порядке" явно, но это легко подразумевается тем фактом, что в ней указано только исключение для типов/универсальных селекторов. Насколько мне известно, единственная причина этого исключения заключается в том, что селектор типов не имеет специального символа, что делает невозможным отличить его от другого простого селектора, если он встречается где-либо еще в составном селекторе. Ля универсальный селектор, несмотря на то, что он представлен звездочкой, на самом деле означает "любой тип элемента" - селектор подстановочных знаков, если хотите, поэтому он следует тому же правилу для селекторов типов.

также проверить предстоящий стандарт который видит более значительные изменения (и определяет термин "составной селектор").

у меня есть несколько заметок, чтобы добавить:

• вероятно, уже широко известно, что используются собственные селекторные двигатели большинство браузеров оценивают селекторы в справа-налево. Существует ошибочное представление, что это относится к простому уровню селектора;это не так. не строго, во всяком случае. Существуют различные оптимизации, учитывающие некоторые распространенные случаи, такие как наличие селекторов идентификаторов, наличие селекторов классов, наличие динамических псевдоклассов и т. д. Эти оптимизации почти всегда происходят независимо от их положения в составном селекторе. Никто в здравом уме не будет смотреть на самый правый простой селектор сначала, когда это действительно селектор типа или идентификатора, который имеет наибольшее значение, особенно если учесть, что большинство авторов помещают идентификатор где-то рядом с началом, и селектор типа может только появляются в начале.

  Я вдаюсь в гораздо более подробную информацию, с примерами, в моем ответе на этот вопрос по вопросу о простом заказе селектора в отношении селектора двигатели.

• подразумевается, что двигатель селектора jQuery Sizzle следует тем же правилам, но имейте в виду, что, как и встроенные в двигатели компоновки, это только один реализация стандартные. Вся природа реализаций заключается в том, что некоторые вещи все делают одинаково, а другие совершенно по-разному, поэтому производительность не может быть квалифицирована на чрезвычайно детализированном уровне.

  однако, это в значительной степени здравый смысл, что чем меньше простых селекторов в последовательности, тем меньше работы должен выполнять механизм селектора при оценке селектора. Вы должны быть настолько конкретны, насколько вам нужно, и не более того. Например, вы можете ограничить контекст селектора ID селектором классов или псевдоклассом, но вам почти никогда не нужно выходить за его пределы.

  также хорошо известно, что jQuery оптимизирует одиночные селекторы идентификаторов, селекторы классов и селекторы типов до document.getElementById(), document.getElementsByClassName() и document.getElementsByTagName() соответственно. Вы можете квалифицировать их с любыми другими селекторами и он все равно будет работать, но вы потеряете эти пути оптимизации как компромисс. Подобные оптимизации существуют в собственных селекторных движках, но это только сходства, которые имеют значение для авторов в любом случае.

• говоря о jQuery, потому что ваш вопрос помечен как в jQuery-селекторы css-селекторы, обратите внимание, что jQuery не поддерживает определенные динамические псевдоклассы, такие как :hover. Основной но принцип остается тем же. (Как упоминалось в комментарии, это can обнаружение элементов, которые в настоящее время :hover в то время он вызывается, если передается document.querySelectorAll(), но по очевидным причинам, это почти никогда не полезно.)

Итак, короче говоря: не беспокойтесь о производительности, когда дело доходит до заказа простых селекторов. Любые отклонения в производительности обычно несущественны, за самыми очевидными исключениями. Синтаксис не накладывает никаких других ограничения, кроме упомянутого выше. Все, что вам нужно сделать, это избежать переквалификации и быть последовательным.

например, вот как я заказываю свои простые селекторы-синтаксис позволяет мне выбирать любой порядок, который мне нравится, и это именно то, что мне кажется правильным:

a#id[attr=val].class1.class2:nth-child(n):link:hover

порядок, в котором вы их размещаете, не имеет значения. Что имеет значение, так это содержание ваших классов css.

вы хотите быть уверены, что один из классов css не устанавливает свойство, которое будет над стилем другого класса css.

в приведенном ниже примере класс green переопределит класс red, сделав цвет текста div зеленым.

CSS-кода:

 .red{

   /* set text color to red */
   color:red;

 }

 .green{

  /* set text color to red */
  color:green;

 }