Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование синтаксиса селекторов 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

Перевод — Дежурка

Смотрите также:




Оставить ответ


1 + девять =

Вставить изображение