Например, я могу получить те же результаты двумя способами.
<html>
<head>
<style type="text/css">
p#red{color:red} /* This is a CSS id selector*/
p.green{color:green} /* This is a CSS class selector*/
</style>
</head>
<body>
<p id="red">red color</p>
<p class="green">greencolor </p>
</body>
</html>
Они оба могут дать мне цветной текст. Но где разница между ними? Спасибо за Ваш ответ.
Идентификаторы уникальны. Каждый элемент может иметь только один идентификатор. На каждой странице может быть только один элемент с такими идентификационными классами НЕ уникальными. Вы можете использовать один и тот же класс для нескольких элементов. Вы можете использовать несколько классов в одном элементе. Больше о
Селектор id используется для указания стиля для одного уникального элемента. с другой стороны Селектор классов используется для указания стиля для группы элементов. В отличие от селектора id, селектор классов чаще всего используется для нескольких элементов. Это позволяет вам установить определенный стиль для многих элементов HTML с тем же классом.
Пример: 1)
#para1{
text-align:center;
color:red;
}
→ это правило стиля будет применено к элементу с id = "para1" (если найдено более одного с тем же правилом стиля id, будет применяться только к первому элементу.
Пример 2)
.center {text-align:center;}
p.center {text-align:center;}
→ это правило стиля будет применяться ко всему элементу с классом "центр", а второе правило будет применяться ко всему элементу "P" с классом = center.
Идентификатор HTML уникален, класс является многоразовым.
Для CSS идентификатор равен 256 классам. Поэтому вам потребуется 256 класс для переопределения стиля идентификатора. Вот и пример: http://codepen.io/chriscoyier/pen/lzjqh