В CSS какая разница между "." и "#" при объявлении набора стилей?

Question

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

Answer 1

Да, они разные ...

# - это селектор идентификатора , используемый для нацеливания на отдельный конкретный элемент с уникальным идентификатором, но. является селектором класса , используемым для нацеливания нескольких элементов с определенным классом. Другими словами:

• #foo {} будет стилизовать отдельный элемент, объявленный с атрибутом id="foo"
• .foo {} будет стилизовать все элементы с атрибутом class="foo" (для одного элемента также может быть назначено несколько классов, просто разделите их пробелами, например, class="foo bar")

Типичное использование

Вообще говоря, вы используете # для стилизации того, что, как вы знаете, будет появляться только один раз, например, такие как высокоуровневые макеты, такие как боковые панели, области баннеров и т. Д.

Классы используются там, где стиль повторяется, например, Допустим, у вас есть специальная форма заголовка для сообщений об ошибках, вы можете создать стиль h1.error {}, который будет применяться только к <h1 class="error">

Специфичность

Другой аспект, в котором селекторы различаются, заключается в их специфике - селектор идентификатора считается более конкретным, чем селектор класса. Это означает, что там, где стили конфликтуют на элементе, стили, определенные с более конкретным селектором, будут переопределять менее специфичные селекторы. Например, для <div id="sidebar" class="box"> любых правил для #sidebar с переопределением конфликтующих правил для .box

Подробнее о селекторах CSS

См. Учебное пособие , чтобы узнать больше отличных учебников по CSS-селекторам - они невероятно мощны, и если ваша концепция состоит в том, что просто "# используется для DIV-файлов", вы бы хорошо прочитали, как именно Используйте CSS более эффективно.

РЕДАКТИРОВАТЬ: Похоже, что Selectutorial, возможно, пошел на большой веб-сайт в небе, поэтому вместо этого попробуйте эту архивную ссылку .

Answer 2

# означает, что оно соответствует id элемента. . обозначает имя класса:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

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

Answer 3

Точка (.) обозначает имя class , а хэш (#) обозначает элемент с определенным атрибутом id . Класс будет применяться к любому элементу, украшенному этим конкретным классом, в то время как стиль # будет применяться только к элементу с этим конкретным идентификатором.

Имя класса:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Именованный элемент:

<style>
   #name { ... }
</style>

<div id="name"></div>

Answer 4

Стоит также отметить, что в каскаде селектор id (#) более специфичен , чем селектор ab (.) , Поэтому правила в операторе id переопределяют правила в операторе класса.

Например, если оба следующих утверждения:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

применяются к одному и тому же элементу HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

правило color: blue заменяет правило color: red .

Answer 5

Несколько быстрых дополнений к тому, что уже было сказано ...

id должен быть уникальным, но вы можете использовать один и тот же идентификатор, чтобы сделать разные стили более специфичными.

Например, учитывая этот фрагмент HTML:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

Вы можете применять различные стили с этими:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

1012 *
*

Еще одна полезная вещь: вы можете иметь несколько классов в элементе, разделяя их пробелами ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Позволяет использовать общие стили в .menu с конкретными стилями, использующими .main.menu и .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Answer 6

Как почти все уже заявили:

Точка (.) обозначает класс , а хеш (#) обозначает ID .

Принципиальное отличие заключается в том, что вы можете многократно использовать класс на своей странице, тогда как идентификатор можно использовать один раз. Это, конечно, если вы придерживаетесь стандартов WC3.

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

Также полезно отметить, что свойства идентификатора заменят свойства класса.

Answer 7

.class предназначается для следующего элемента:

<div class="class"></div>

#class предназначается для следующего элемента:

<div id="class"></div>

Обратите внимание, что идентификатор ДОЛЖЕН быть уникальным во всем документе, в то время как любое количество элементов может иметь общий класс.

Answer 8

# - это селектор идентификатора. Он соответствует только элементам с совпадающим идентификатором. Следующее правило стиля будет соответствовать элементу, который имеет атрибут id со значением «green»:

#green {color: green}

См. http://www.w3schools.com/css/css_syntax.asp для получения дополнительной информации

Answer 9

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

Вот линия вверх.

Матрица

#style 0,0,1,0 id

.style 0,1,0,0 class

если вы хотите переопределить эти два, вы можете использовать <style></style>, у которого есть уровень матрицы или 1,0,0,0. И запрос @media переопределит все выше ... Я не уверен в этом, но думаю, что селектор идентификаторов # может использоваться только один раз на странице.