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

Ответ 1

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

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

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

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

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

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

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

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

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

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

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

Ответ 3

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

Имя класса:

<style>
.class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

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

<style>
#name { ... }
</style>
<div id="name"></div>

Ответ 4

Также стоит отметить, что в cascade селектор id (#) больше specific, чем селектор класса (.). Поэтому правила в выражении id будут переопределять правила в инструкции класса.

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

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

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

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

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

правило color: blue переопределит правило color: red.

Ответ 5

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

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

Ответ 6

Как и многие, все уже заявили:

Период ( "." ) указывает класс, а хэш ( "#" ) указывает идентификатор.

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

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

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

Ответ 7

.class задает следующий элемент:

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

#class задает следующий элемент:

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

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

Ответ 8

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

#green {color: green}

Подробнее см. http://www.w3schools.com/css/css_syntax.asp

Ответ 9

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

Вот строка.

Матрица

#style 0,0,1,0 id

.style 0,1,0,0 class

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