Разница между ниже стилями css?

Question

Можно создать дубликат:
In CSS what is the difference between “.” and “#” when declaring a set of styles?

Я новичок в веб-разработки. могу ли я узнать разницу между двумя стилями CSS?

.styleName{ 
color:red; 
} 

и

#styleName{ 
color:red; 
} 

Спасибо!

Answer 1

Точка означает «класс», где знак «#» означает «id».

Первый соответствует всем тегам, которые относятся к типу класса «styleName». Второй - тот же для идентификаторов.

Пример:

<p class="styleName">hi</p> <!-- first matches, its a class of name styleName --> 
<p id="styleName">hi</p> <!-- second matches, its an id of type styleName --> 

Обратите внимание, что вы неправильно "цвет" в #styleName.

Answer 2

Один ссылается на элемент с именем класса из styleName (class="styleName" в вашем HTML), другие ссылки один с ID из styleName (с id="" atrribute).

A # в CSS обозначает селектор идентификаторов, тогда как . (точка) обозначает селектор классов. Идентификатор должен быть уникальным для документа, тогда как класс может быть присвоен нескольким элементам.

Answer 3

. префикс относится к классу элемента. Префикс # относится к идентификатору элемента.

Итак, ваш первый пример будет выглядеть примерно как <element class="styleName">..... Ваш второй пример будет искать что-то вроде <element id="styleName">....

Answer 4

.styleName будет соответствовать любым объектам с классом StyleName например <span class="styleName> #styleName будет соответствовать любым объектам с идентификатором StyleName например <span id="styleName> Также Вы ввели неправильный цвет в #styleName раздел

Answer 5

См. нижеприведенные ссылки. Они могут прояснить ум:

http://css-tricks.com/the-difference-between-id-and-class/

http://www.tizag.com/cssT/cssid.php

Answer 6

Они совпадают на разных вещи. Первое (.styleName) совпадает со всеми элементами, имеющими класс styleName. Это может быть несколько элементов. Второй в #styleName соответствует элементу, имеющему id styleName. Может быть только один элемент с этим id.