В CSS, каково различие между и “#\” при объявлении ряда стилей?

# средства, которым это соответствует id из элемента. Эти . показывает имя класса:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Примечание, что в документе HTML, идентификационный атрибут должен быть уникален , поэтому если у Вас есть больше чем один элемент, нуждающийся в определенном стиле, необходимо использовать имя класса.

Точка (.) имеет значение имя класса , в то время как хеш (#) показывает элемент с определенным идентификационный атрибут. Класс будет относиться к любому элементу, украшенному тем конкретным классом, в то время как стиль # будет только относиться к элементу с тем конкретным идентификатором.

Имя класса:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Названный элементом:

<style>
   #name { ... }
</style>

<div id="name"></div>

Также стоит отметить, что в каскад , идентификационный (#) селектор - больше конкретный , чем b (.) селектор. Поэтому правила в идентификационном операторе переопределят правила в операторе класса.

, Например, если оба из следующих утверждений:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

применяются к тому же элементу HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

правило color:blue переопределило бы правило color:red.

Несколько быстрых расширений на том, что было уже сказано...

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
{ ... }

Как в значительной степени все уже указал:

период А (.) указывает класс , и хеш (#) указывает идентификатор .

, который принципиальное различие между - то, что можно снова использовать класс на странице много раз, тогда как идентификатор может использоваться однажды. Таким образом, конечно, если Вы придерживаетесь стандартов WC3.

страница А все еще представит, если у Вас будет несколько элементов с тем же идентификатором, но Вы столкнетесь с проблемами, если/когда Вы попытаетесь динамично обновить, сказал, что элементы путем вызова их с их идентификатором, так как они не уникальны.

также полезно отметить, что свойства ID заменят свойства класса.

.class цели следующий элемент:

<div class="class"></div>

#class цели следующий элемент:

<div id="class"></div>

Примечание, что идентификатор ДОЛЖЕН быть уникальным всюду по документу, пока любое число элементов может совместно использовать класс.

# является идентификационным селектором. Это соответствует только элементам идентификатору соответствия. Следующее правило стиля будет соответствовать элементу, который имеет идентификационный атрибут со значением "зеленого" цвета:

#green {color: green}

См. http://www.w3schools.com/css/css_syntax.asp для получения дополнительной информации