В CSS, в чем разница между "."и" # " при объявлении набора стилей?
в чем разница между #
и .
при объявлении набора стилей для элемента и какова семантика, которая вступает в игру при решении, какой из них использовать?
9 ответов
Да, они разные...
#
Это ID-селектор, использовала один конкретный элемент с уникальным идентификатором, но . это селектор класса используется для target несколько элементы с определенным классом. Иными словами:--22-->
-
#foo {}
будет стиль один элемент объявлен с атрибутомid="foo"
-
.foo {}
будет стиль все элементы с атрибутомclass="foo"
(вы также можете иметь несколько классов, назначенных элементу, просто разделите их пробелами, напримерclass="foo bar"
)
типичные области применения
вообще говоря, вы используете # для укладки что-то, что вы знаете, будет появляться только один раз, например, такие вещи, как high level layout divs, такие боковые панели, области баннеров и т. д.
классы используются там, где стиль повторяется, например, скажем, вы возглавляете специальную форму заголовок для сообщений об ошибках, вы можете создать стиль h1.error {}
который будет применяться только к <h1 class="error">
специфика
другой аспект, где селекторы отличаются в их специфичности-селектор id считается более конкретным, чем селектор класса. Это означает, что где стили конфликт на элементе те, которые определены с более конкретным селектором, будут переопределять менее конкретные селекторы. Например,<div id="sidebar" class="box">
правила #sidebar
С переопределить конфликтующие правила для .box
Узнайте больше о селекторах CSS
посмотреть Selectutorial для более больших праймеров на селекторах CSS-они невероятно мощны, и если ваша концепция заключается в том, что "# используется для DIVs", вам будет полезно прочитать о том, как использовать CSS более эффективно.
EDIT: похоже, Selectutorial мог пойти на большой сайт в небе, поэтому попробуйте это архив по ссылке: вместо.
на #
означает, что он соответствует id
элемента. The .
обозначает имя класса:
<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>
#myRedText {
color: red;
}
.blueText {
color: blue;
}
обратите внимание, что в HTML-документе атрибут id должен быть уникальным, поэтому, если у вас есть более одного элемента, нуждающегося в определенном стиле, вы должны использовать имя класса.
точка(.
) означает класс имя, в то время как хэш (#
) обозначает элемент с определенным id. Класс будет применяться к любому элементу, украшенному этим конкретным классом, в то время как # style будет применяться только к элементу с этим конкретным идентификатором.
имя класса:
<style>
.class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>
именованного элемента:
<style>
#name { ... }
</style>
<div id="name"></div>
также стоит отметить, что в каскад, an id (#
) селектор больше конкретные чем b (.
) селектора. Поэтому правила в инструкции id будут переопределять правила в инструкции class.
например, если оба следующих утверждения:
.headline {
color:red;
font-size: 3em;
}
#specials {
color:blue;
font-style: italic;
}
применяются к тому же элементу HTML:
<h1 id="specials" class="headline">Today's Specials</h1>
на цвет:синий правило будет переопределить цвет:красный правило.
несколько быстрых расширений на то, что уже было сказано...
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
{ ... }
как почти все уже заявили:
срок (.
) означает класс, и хэш (#
) означает ID.
принципиальное различие заключается в том, что вы можете повторно использовать класс на своей странице снова и снова, в то время как ID можно использовать один раз. Это, конечно, если вы придерживаетесь стандартов WC3.
страница по-прежнему будет отображаться, если у вас есть несколько элементов с одинаковым идентификатором, но вы столкнетесь с проблемы, если / когда вы пытаетесь динамически обновлять указанные элементы, вызывая их с их идентификатором, поскольку они не уникальны.
также полезно отметить, что свойства ID заменят свойства класса.
.class
нацелен на следующий элемент:
<div class="class"></div>
#class
цели следующий элемент:
<div id="class"></div>
обратите внимание, что идентификатор должен быть уникальным во всем документе, в то время как любое количество элементов может иметь общий класс.
С # - это ID-селектор. Он соответствует только элементам с соответствующим id. Следующее правило стиля будет соответствовать элемент, который имеет атрибут id со значением "зеленый":
#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>
ведьма имеет уровень матрицы или 1,0,0,0.
И @media query будет переопределять все вышеизложенное...
Я не уверен в этом, но я думаю, что селектор ID #
может использоваться только один раз в страница.