В CSS какая разница между"."и" # " при объявлении набора стилей?

The # означает, что он соответствует 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 должен быть уникальным, поэтому, если у вас есть более одного элемента, нуждающегося в определенном стиле, вы должны использовать имя класса.

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

имя класса:

<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 (#) селектор больше конкретные чем A b (.) селектора. Таким образом, правила в идентификатор оператора будет переопределить правила в заявление класс.

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

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

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

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

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

the цвет:синий правило будет переопределить цвет:красный правило.

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

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.

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

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

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

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

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

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

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

обратите внимание, что идентификатор должен быть уникальным во всем документе, в то время как любое количество элементов может совместно использовать класс.

# - это селектор идентификаторов. Он соответствует только элементам с соответствующим идентификатором. Следующее правило стиля будет соответствовать элемент, который имеет атрибут 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 # может использоваться только один раз в a страница.