div.selector против селектора

Question

В css я видел, как div.selector и селектор используются для определения правил стилевого оформления для конкретного селектора.

В чем разница между этими двумя и почему я должен учитывать их при принятиидругой при написании моих собственных файлов CSS?

Answer 1

• div.selector предназначается только для div элементов с классом selector.
• .selector предназначается для ВСЕХ элементов с классом .selector, а не только DIVs

Таким образом, префикс элемента с именем тега, если вы ЗНАЕТЕ, что это тот, к которому вы будете применять css.Более поздний подход является более универсальным и предназначен для всех элементов с указанным классом.Тем не менее, вы должны быть специфичными всякий раз, когда можете.

Если вы знаете, что только div элементы будут иметь .selector класс , переходить к конкретному лучше с точки зрениянапример, div.selector, а не .selector, который будет искать все элементы на странице, но в конечном итоге будет применять эти стили только к DIVs.

Answer 2

div.selector является более конкретным селектором, чем .selector.

Например, у вас есть этот HTML:

<a href="" class="selector">Link</a>
<div class="selector"></div>

Селектор div.selector соответствует только div, где .selector выбирает оба элемента.

Answer 3

Как уже упоминалось, префикс вашего класса с именем элемента (то есть: div.selector) выберет только те элементы, которые являются div, но исключат все остальное.Имея это в виду, вы можете создавать классы, которые могут применяться к нескольким элементам и / или предназначаться для одного элемента.

С точки зрения читабельности, префикс ваших классов может помочь вам и вашей команде определить, что это за элемент изнутри.CSSОднако, с точки зрения общей практики и производительности, обычно рекомендуется стараться воздерживаться от добавления префиксов вашего класса и объявлений id, так как это вызывает дополнительную работу для движка браузера ваших пользователей.

Путем добавления префиксов к вашим классам (т.е.div # selector или div.selector) ваш браузер должен найти класс и затем определить, относится ли он к типу div).Хотя время, необходимое для этого, может быть незначительным, я считаю, что все же стоит упомянуть.

Ниже приведены несколько полезных ссылок по вопросам производительности и практики:

https://developer.mozilla.org/en/Writing_Efficient_CSSи http://css -tricks.com / эффектный рендеринг-css /