Ответы:
#это селектор идентификатора , используемый для целевых одного конкретного элемента с уникальным идентификатором, но. это селектор класса, используемый для нацеливания нескольких элементов с определенным классом. Другими словами:
#foo {}будет стилизовать единственный элемент, объявленный с атрибутомid="foo".foo {}будет стилизовать все элементы с атрибутом class="foo"(вы также можете назначить несколько классов элементу, просто разделите их пробелами, например class="foo bar")Вообще говоря, вы используете # для стилизации того, что, как вы знаете, будет появляться только один раз, например, такие как макеты верхнего уровня, такие как боковые панели, области баннеров и т. Д.
Классы используются в тех случаях, когда стиль повторяется, например, если вы используете специальную форму заголовка для сообщений об ошибках, вы можете создать стиль, h1.error {}который будет применяться только к<h1 class="error">
Другой аспект, в котором селекторы отличаются, заключается в их специфике - селектор идентификатора считается более конкретным, чем селектор класса. Это означает, что там, где стили конфликтуют с элементом, те, которые определены с более конкретным селектором, будут переопределять менее специфичные селекторы. Например, учитывая <div id="sidebar" class="box">любые правила для #sidebarс переопределением конфликтующих правил для.box
В разделе « Учебное пособие» приведены более полезные учебники по CSS-селекторам - они невероятно мощные, и если ваша концепция заключается просто в том, что «# используется для DIV-файлов», вам лучше узнать, как именно использовать CSS более эффективно.
РЕДАКТИРОВАТЬ: Похоже, что Selectutorial, возможно, пошел на большой веб-сайт в небе, поэтому вместо этого попробуйте эту ссылку архива .
#Означает , что он совпадает с 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 должен быть уникальным , поэтому, если у вас есть более одного элемента, нуждающегося в определенном стиле, вы должны использовать имя класса.
Точка ( .) обозначает имя класса, а hash ( #) обозначает элемент с определенным атрибутом id . Класс будет применяться к любому элементу, украшенному этим конкретным классом, в то время как стиль # будет применяться только к элементу с этим конкретным идентификатором.
Название класса:
<style>
.class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>Именованный элемент:
<style>
#name { ... }
</style>
<div id="name"></div>Стоит также отметить , что в каскаде , идентификатор ( #) селектор является более конкретным , чем AB ( .селектор). Следовательно, правила в операторе id переопределяют правила в операторе класса.
Например, если оба следующих утверждения:
.headline {
color:red;
font-size: 3em;
}
#specials {
color:blue;
font-style: italic;
}применяются к одному и тому же элементу HTML:
<h1 id="specials" class="headline">Today's Specials</h1>цвет: синий правило будет переопределить цвет: красный правило.
Несколько быстрых расширений на том, что уже было сказано ...
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
{ ... }.class предназначается для следующего элемента:
<div class="class"></div>#class предназначается для следующего элемента:
<div id="class"></div>Обратите внимание, что идентификатор ДОЛЖЕН быть уникальным во всем документе, в то время как любое количество элементов может совместно использовать класс.
Как почти все уже заявили:
Точка ( .) указывает на класс , а хэш ( #) указывает на идентификатор .
Принципиальное отличие заключается в том, что вы можете многократно использовать класс на своей странице, тогда как идентификатор можно использовать один раз. Это, конечно, если вы придерживаетесь стандартов WC3.
Страница все равно будет отображаться, если у вас есть несколько элементов с одинаковым идентификатором, но у вас возникнут проблемы, если / когда вы попытаетесь динамически обновить указанные элементы, вызвав их с идентификатором, поскольку они не являются уникальными.
Также полезно отметить, что свойства идентификатора заменят свойства класса.
# Является селектором идентификатора. Соответствует только элементам с совпадающим идентификатором. Следующее правило стиля будет соответствовать элементу, который имеет атрибут id со значением «green»:
#green {color: green}Смотрите http://www.w3schools.com/css/css_syntax.asp для получения дополнительной информации
Вот мой подход к объяснению правил .styleи они #styleявляются частью матрицы. что если они не в правильном порядке, они могут перекрывать друг друга или вызывать конфликты.
Вот состав.
матрица
#style 0,0,1,0 id
.style 0,1,0,0 classесли вы хотите переопределить эти два, вы можете использовать <style></style>witch с уровнем матрицы, или 1,0,0,0.
запрос @media перезапишет все выше ... Я не уверен в этом, но я думаю, что селектор идентификаторов #может использоваться только один раз на странице.