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

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

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

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

4 ответа

. относится к классу. можно выбрать с помощью .one.

# относится к идентификатору. можно выбрать с помощью #one.

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


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

...
<p>Foo</p>
<p id="bar">Bar</p>

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

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

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


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

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

licensed under cc by-sa 3.0 with attribution.