Селектор ID
Продолжаем разбирать CSS селекторы, и сегодня узнаем про селектор id.
Данный селектор используется, чтобы выбрать конкретно один элемент на странице. Прошу Вас запомнить, что только один элемент на странице можно помечать селектором id.
Приступим к синтаксису данного селектора:
<html>
<head>
<title>Селектор id</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p id="one">Пример использования селектора id</p>
</body>
</html>
Сразу же напишем в файле стилей следующий код:
#one {
color: green;
font-size: 25px;
}
Результат на лицо, цвет текста изменился и стал зеленого цвета, а также размер шрифта увеличился до 25px.
Селектор id указывается при помощи знака решетки (#), за решеткой следует название идентификатора, которое было присвоено в HTML файле (в нашем случае one). Дальше все идет как обычно, название свойства и его значение и т.д.
Разберем пример со следующим кодом:
#one {
color: green;
font-size: 25px;
}
p {
color: red;
}
Каких-либо изменений не произошло. А почему, ведь мы указали, что у всех тегов <p> цвет текста должен быть красным, а цвет так и не изменился, а остался зеленым, как и был.
Произошло это в связи с тем, что селекторы CSS имеют, так скажем, свою степень важности. ID селектор является самым важным, и поэтому селектор тега p был проигнорирован. Если из CSS кода удалить селектор ID, то цвет текста изменится и будет красным.
В следующем уроке мы с Вами разберем еще один селектор CSS.
