Какая разница. и # в файле css?

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

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

Они ссылаются по-разному на страницу html? Как наследуются свойства?

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

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

<p class="foo bar baz">

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

Ответ 3

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

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