Использование синтаксиса селекторов CSS
17 октября 2018 | Опубликовано в css | Нет комментариев »
Во встроенном или связанном файле таблицы стилей селектор является тем элементом разметки, чей внешний вид вы изменяете. Существует несколько разных способов выбора селекторами, самые простые из которых показаны ниже:
Синтаксис селекторов CSS первого и второго уровня
| Название | Пример | Использование |
| Универсальный селектор | * { margin: 0; } | Для выбора всех элементов в документе или на всем веб-сайте, если используется в связанном файле стилей. Обычно используется для сбросов для кода CSS, чтобы привести все элементы к одним и тем же исходным свойствам. |
| Одиночный селектор | p { color: green; } | Чтобы задать свойства одному тегу. |
| Групповой селектор | h1, h2, h3 { color: red; } | Чтобы задать одни и те же свойства нескольким элементам. |
| Контекстный електор | ul li { font-weight: bold; } | Для задания стилей последнему элементу в объявлении, только если он — прямой потомок первого элемента. В приведенном примере элементы списка будут полужирными, только если находятся в ненумерованном списке, т. е., являются его прямыми потомками. А элементы списка в нумерованных списках не будут затронуты. |
| Родственный селектор | h2 ~ p { font-color: red; } | Выбирает все подходящие элементы, которые находятся за первым элементом в объявлении, на одном уровне с ним. |
| Соседний селектор | h2 + p { font-style: italic; } | Выбирает подходящий элемент, если он располагается сразу за первым элементом объявления. В приведенном примере первый абзац, расположенный сразу за элементом заголовка второго уровня, будет отображаться курсивом. На другие абзацы эта запись не повлияет. |
| Селектор идентификатора | ul#nav { background: blue; } | Выделяет элементы с идентификатором, соответствующим записи после символа диеза в объявлении. Обратите внимание, идентификатор должен быть уникальным на веб-странице. Тот же идентификатор может использоваться на других веб-страницах, но только один раз на одной веб-странице. |
| Селектор класса | p.special { color: red; } | Выбирает элементы класса, соответствующего записи после точки в объявлении. Класс может быть использован многократно на одной веб- странице. |
| Селектор атрибута | input[type="text"] | Применяется только к тегам, у которых есть заданное значением. |
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
549