В чем разница между . и # в файле CSS?

Question

В примерах css я видел правила, которые начинаются с ., а некоторые начинаются с # - иногда они смешиваются в одном файле. В чем разница между этими правилами:

h1  { font-size:18pt;}
.new-alerts  { font-size:11pt; font-weight:bold;}
#old-alerts  { position:relative; font-size:10pt; }

На html-страницу они ссылаются по-другому? Это как свойства наследуются?

Answer 1

. относится к классу. <span class="one" /> можно выбрать с помощью .one.

# относится к идентификатору. <span id="one" /> можно выбрать с помощью #one.

Вы должны использовать классы, когда может быть более одного данного элемента, и идентификаторы, если вы знаете, что будет только один. #navigation-bar будет использовать идентификатор, потому что у вас будет только одна панель навигации в макете, но .navigation-link будет использовать имя класса, потому что у вас будет несколько навигационных ссылок. (Было бы лучше использовать #navigation-bar a:link для получения навигационных ссылок, но вы поняли мою точку зрения.)

Answer 2

Точка . является селектором класса , хеш / фунт / октоторп # выбирается по идентификатору :

<style>
    .foo { ... }
    #bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>

Идентификаторы должны быть уникальными во всем документе, классы не должны быть. Это в основном основное отличие. Есть некоторые вещи, которые следует отметить в отношении сценариев, но они, как правило, не представляют особого интереса при моделировании.

Кроме того, элемент может принадлежать нескольким классам:

<p class="foo bar baz">

и, как видно выше, классы и идентификаторы не являются взаимоисключающими.

Answer 3

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

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

Answer 4

См. Класс против ID