Это зависит от предполагаемой семантики и, как говорили другие, должно быть как можно более конкретным.

• #idName для уникальных элементов на странице. Хорошими примерами являются #header и #footer
• TAGNAME для стилизации страницы общего назначения.
• TAG.classname и .classname для исключений / отменяет указанные выше правила.

И не забывайте об использовании расширенных селекторов. Плохой пример:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    .in_the_menu { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1 class="in_the_menu">My Menu</h1>
</div>

То же самое могло быть достигнуто с помощью:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    #mainMenu H1 { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1>My Menu</h1>
</div>

Второй пример избавляется от лишнего атрибута "class" в элементе H1 в div "mainMenu". Это дает два важных преимущества:

1. HTML-код меньше и чище
2. Вы с меньшей вероятностью забудете добавить атрибут class

Если вы хорошо позаботитесь о своем CSS, и использовать надлежащие расширенные селекторы, вы можете почти полностью исключить классы CSS. И сохраните их только для исключений / переопределений.

Возьмем этот пример, который рисует поля с заголовками:

#content H2{
   border: 1px solid #008789;
   padding: 0em 1em;
   margin: 0.2em 0em;
   margin-bottom: 1em;
   font-size: 100%;
   background: #cccb79
}

#content H2 + DIV{
   margin-top: -1em;
   border-left: 1px solid #008789;
   border-right: 1px solid #008789;
   border-bottom: 1px solid #008789;
   margin-bottom: 1em;
}

Теперь, как только вы выполните H2 с DIV в Элемент #content , у вас хорошая коробка. остальные DIV и H2 остаются в покое:

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

Если вы правильно понимаете эти правила, вам вряд ли когда-либо понадобятся классы, и вы сможете работать только с идентификаторами и именами TAG. И, как дополнительный бонус, ваш HTML будет намного удобнее читать и поддерживать.

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

Если вы правильно понимаете эти правила, вам вряд ли когда-либо понадобятся классы, и вы сможете работать только с идентификаторами и именами TAG. И, как дополнительный бонус, ваш HTML будет намного удобнее читать и поддерживать.

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

Если вы правильно понимаете эти правила, вам вряд ли когда-либо понадобятся классы, и вы сможете работать только с идентификаторами и именами TAG. И, как дополнительный бонус, ваш HTML будет намного удобнее читать и поддерживать.

вам следует использовать селектор, лучше всего описывающий ваши правила

• id: когда вы хотите выбрать один единственный элемент

• .classname: когда вы хотите стилизовать элементы независимо от их тега
• tag.classname: если вы хотите стилизовать только теги с заданным классом
• tag tag tag: если вы хотите стилизовать все подэлементы тега

Вы должны отдавать предпочтение в порядке от наибольшего к наименьшему:

1. id

2. tag
3. tag.className
4. .className

Селекторы идентификаторов работают быстро. Селекторы тегов работают достаточно быстро. Селекторы чистого класса работают медленно, потому что браузер, по сути, должен опросить каждый элемент и посмотреть, есть ли у каждого этот класс. Получение элементов по идентификатору или имени тега - это «собственные» операции из контекста браузера.

Кроме того,

Селекторы классов

.className

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

<a href="#" class="className"></a>
<p class="className"></p>
<img src="/path/to/image.png" class="className" />

Но вы также можете ограничить его следующим образом:

img.className

Помещая тег вместе с определением стиля, вы говорите, что этот стиль должен использоваться только тогда, когда это класс, используемый этим конкретным тегом, в данном случае изображением.

HTML-код будет выглядеть следующим образом:

<img src="/path/to/image.png" class="className" />

Если у вас есть другие элементы на странице, использующие тот же стиль класса, но не относящиеся к одному и тому же тегу, то стили, указанные в этом, не будут применяться, и они будут принимать в более общей версии, как указано в первом примере.

Итак, повторяя приведенный выше пример:

<a href="#" class="className"></a>
<p class="className"></p>
<img src="/path/to/image.png" class="className" />

Только изображение будет иметь стиль, установленный img.className , тогда как все остальные будут взять на себя правила стиля, установленные в .className .

Селекторы ID

#idName

Это должно использоваться, когда есть только один экземпляр конкретного элемента, к которому вы хотите применить стиль.

Стоит отметить одну вещь: некоторые технологии сценариев на стороне сервера (в первую очередь ASP.NET) не работают с использованием идентификаторов для вашего стиля. Если есть вероятность, что ваш дизайн будет использоваться с такой технологией, я рекомендую забыть о селекторах #id и использовать вместо них tag.className .

Причина в том, что ASP. NET фактически изменяет идентификатор, который попадает в HTML на основе ряда критериев, если тег выводится элементом управления на стороне сервера.

Это действительно зависит от ситуации:

.error{
  color:red;
}

p.error{
  background-color:yellow;
}

div.error{
  background-color:grey;
}

Всегда используйте каскадный эффект C SS в ваших интересах.

Хорошей практикой является использование наименее конкретных правил для каждого правила.

То, как вы структурируете свой CSS, будет зависеть от конкретных потребностей дизайна.

Когда использовать, что зависит от того, что вы хотите выбрать. img.className ( селектор типа + селектор класса ) выбирает только элементов IMG, которые находятся в классе «className», а . className (просто селектор класса) выбирает любой элемент , который находится в этом классе, и #idName ( селектор id ) любой элемент с ID «idName».

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

Итак, если у вас есть элемент IMG с идентификатором «idName» из класса «className»:

Да. Возможно, вы захотите использовать одно и то же имя класса для двух элементов в будущем. Будьте ясны и ясны. Это также предотвратит наложение правил класса на непредусмотренные элементы.

h1.title { font-size:18px; } /* My h1's are big */
 p.title { font-size:16px; } /* My p's are smaller */

  .title { color:#336699; }  /* All titles are blue */

Используйте идентификаторы только при необходимости и только один раз на страницу.

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