44 lines
3.1 KiB
Markdown
44 lines
3.1 KiB
Markdown
|
---
|
|||
|
|
title: ID Selector
|
|||
|
|
localeTitle: Выбор идентификатора
|
|||
|
|
---
|
|||
|
|
## Выбор идентификатора
|
|||
|
|
|
|||
|
|
Селектор идентификаторов CSS применяет стили к определенному элементу html. Селектор идентификаторов CSS должен соответствовать атрибуту ID элемента HTML. В отличие от классов, которые могут применяться к нескольким элементам на любом сайте, конкретный идентификатор может применяться только к одному элементу на сайте. Идентификатор CSS переопределяет свойства класса CSS. Чтобы выбрать элемент с определенным идентификатором, напишите символ хеша (#), за которым следует идентификатор элемента.
|
|||
|
|
|
|||
|
|
### Синтаксис
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
#specified_id { /* styles */ }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вы можете комбинировать селектор идентификаторов с другими типами селекторов для создания особого элемента.
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
section#about:hover { color: blue; }
|
|||
|
|
|
|||
|
|
div.classname#specified_id { color: green; }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Примечание о идентификаторах
|
|||
|
|
|
|||
|
|
ID следует избегать при стилизации, если это возможно. Поскольку он обладает высокой специфичностью и его можно переопределить только в том случае, если вы встраиваете стили или добавляете стили в `<style>` . Вес ID переопределяет селектора классов и селекторов типов.
|
|||
|
|
|
|||
|
|
Помните, что идентификатор должен соответствовать атрибуту ID элемента HTML.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div id="specified_id"><!-- content --></div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### специфичность
|
|||
|
|
|
|||
|
|
Селекторы ID имеют высокую специфичность, что затрудняет их переопределение. Классы имеют гораздо более низкую специфичность и обычно являются предпочтительным способом стилизации элементов, чтобы избежать проблем с конкретностью. [Специфичность для MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
[freeCodeCamp Challenge - установка идентификатора элемента](https://www.freecodecamp.org/challenges/set-the-id-of-an-element)
|
|||
|
|
|
|||
|
|
[freeCodeCamp Challenge - использовать атрибут идентификатора для стилизации элемента](https://www.freecodecamp.org/challenges/use-an-id-attribute-to-style-an-element)
|
|||
|
|
|
|||
|
|
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors)
|