it-swarm.com.ru

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

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

193
Sam152

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

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

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

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

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

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

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

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

Узнайте больше о CSS селекторах

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

Правка: Похоже, что Selectutorial, возможно, пошел на большой веб-сайт в небе, поэтому попробуйте это ссылка на архив вместо этого.

314
Paul Dixon

# означает, что он соответствует 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 должен быть уникальным, поэтому, если у вас есть более одного элемента, нуждающегося в определенном стиле, вы должны использовать имя класса.

26
nickf

Точка (.) обозначает имя 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>
10
tvanfosson

Также стоит отметить, что в каскад селектор 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 .

7
Jans Carton

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

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
{ ... }


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

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

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

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }
5
Peter Boughton

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

Точка (.) указывает класс, а хеш (#) указывает ID.

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

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

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

4
Anders

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

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

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

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

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

3
Bobby Jack

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

#green {color: green}

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

2
tehvan