В CSS псевдо-классы: последний элемент :в прошлом-ребенок(), во-первых :первый-ребенок() и пронумерованы :го-ребенка()
Опубликованно 24.12.2018 00:44
Как установить стили в отдельный объект веб-страницы? Распространенный способ-присвоить класс или ID, или обратитесь к тегу. Но такая схема не всегда работает. Особенно когда дело доходит до вложенных меню, последние пункты в списке стилей CSS активных и посещенных ссылок. Для таких случаев был создан псевдо-классы. Этого конкретного типа селекторов, которые помогают защитить нервную систему разработчика и существенно упростить компоновку.
Синтаксис и правила использования псевдо-классов
Отличительной чертой псевдо-классов толстой кишки. Этот знак отличает их от обычных селекторов. После двоеточия, без пробела идет имя псевдокласса. В конце концов, при необходимости, в скобках стоимость в виде целого числа, формулы или ключевые слова.
ли:в прошлом-ребенок{ обивка-дно: 0; }
Иногда можно встретить двойное написание (::). Эта спецификация была добавлена в CSS3 получить доступ к псевдо-элементы ::фон ::до, ::после. Они отличаются тем, что добавить стили к объектам, не находящимся в дереве DOM. Например, заглавная буква или первая линия.
П::перед{ содержание: "; дисплей: блок; ширина: 100%; цвет: #222; }
Тридцать селекторы, мы разбирать не будем, возьмем только те, что означает в CSS последний пункт (:в прошлом-ребенок), первый (:Сначала-ребенок). А также рассмотрим специальную псевдо-класса (через:nth-ребенок), которая позволяет получить доступ к дочерним элементам по порядковому номеру. Исследование будет например создать навигационную панель:
<!Элемент DOCTYPE HTML> и <HTML-код Ланг="АН"> тег <head> <мета кодировка="UTF-8" не> <название>документ</название> <мета имя="область просмотра" содержимого="ширина=устройство-ширина, начально-масштаб=1"> <стиль> тело{ ширина: 100%; обивка: 0; маржа: 0; фон: #000; } сча{ дисплей: флекс; оправдать-содержание: флекс-конец; ширина: 100%; маржа: 0; обивка: 0; справочная информация: формате RGBA(255,255,255,.1); } сча в{ цвет: #ФФФ; текст-отделка: нет; текст-преобразования: заглавные; шрифт: полужирный 15px Arial, без serif; обивка: 1эм; } </стиль> тегом </head> в <тело> <навигация> <а href="#">Главная</a> <а href="#">новости</a> в <а href="#">услуги</a> <а href="#">блог</a> </навигация> </тело> тегом </HTML>
Получилось простое меню с четырьмя одной белой. Используя псевдо-классы можно выборочно настроить каждый элемент в навигации, изменять размер, или сделать их разноцветными. Например, чтобы указать в CSS последний пункт является первый красный и зеленый, вам нужен следующий код:
сча a:во-первых-ребенок{ цвет: зеленый; } сча себе:в прошлом-ребенок{ цвет: красный; } Универсальный селектор :nth-ребенок
Этот селектор относится к числу структурные псевдо-классы. Он может быть использован для управления объектами в соответствии с их нумерацией. Порядковый номер указывается в круглых скобках и начинается с одного. Если вам нужен последний элемент в CSS используется для этой записи:
/*добавление последнего элемента до правой границы-красный*/ сча в через:nth-ребенок(-1){ границы права: 1px сплошной красный; }
Помимо значения calcisernia через :nth-ребенок принимает в качестве значений ключевые слова: нечетные - нечетными элементами; даже - даже.
Теперь чтобы добавить желтый цвет в любой другой ссылке на панели навигации, вы должны зарегистрироваться:
сча в через:nth-ребенок(даже){ границы вниз: 1px твердых желтый; } Комбинированное использование псевдо-классов
Каскадные Таблицы Стилей позволяют объединить в одном селекторе несколько псевдо-классы. Этот подход может быть полезен, когда вам нужно назначить определенные стили CSS для всех элементов, кроме последнего.
сча a:не(:в прошлом-ребенок){ обивка-право: 10 ПКС; }
Буквально, запись выше означает, что браузер должен добавить всех ссылок <a> внутри навигации <навигация>, по правому краю, за исключением последнего элемента. CSS-селектору :не означает "все кроме". В скобках указаны названия классов, идентификаторов, псевдо-элементы и теги заголовков.
Теперь, зная о возможности объединения селекторов, давайте добавим нашей навигации интерактивные. Для этого мы используем псевдо-класс гласит: "овер", добавляет стили при наведении курсора мыши на объект.
<!Элемент DOCTYPE HTML> и <HTML-код Ланг="АН"> тег <head> <мета кодировка="UTF-8" не> <название>документ</название> <мета имя="область просмотра" содержимого="ширина=устройство-ширина, начально-масштаб=1"> <стиль> тело{ ширина: 100%; обивка: 0; маржа: 0; фон: #000; } сча{ дисплей: флекс; оправдать-содержание: флекс-конец; ширина: 100%; маржа: 0; обивка: 0; справочная информация: формате RGBA(255,255,255,.1); переполнение: скрытый; } сча в{ цвет: #ФФФ; текст-отделка: нет; текст-преобразования: заглавные; шрифт: полужирный 15px Arial, без serif; обивка: 1эм; переход: все .5С легкость-вход-выход; } сча a:не(:в прошлом-ребенок){ обивка-право: 2ем; } книжка на:на границы вниз: 1px твердых#D349CE; преобразования: масштаб(1.03); светонепроницаемость: .8; } сча в через:nth-ребенок(2):Наведите{ границы цвет: #46C5CD; } сча в через:nth-ребенок(3):наведите{ границы цвет: #3EDC79; } сча в через:nth-ребенок(-1):наведите{ границы цвет: #f69; } </стиль> тегом </head> в <тело> <навигация> <а href="#">Главная</a> <а href="#">новости</a> в <а href="#">услуги</a> <а href="#">блог</a> </навигация> </тело> тегом </HTML>
С селектором книжка а:Ховер, мы сделали это, чтобы получить вид ссылки каждый раз, когда изменяется под курсором. Так пользователю будет намного легче и интереснее взаимодействовать с сайтом. Пожалуйста, обратите внимание на запись навигация с через:nth-ребенок(Н). Благодаря каждого пункта меню свой цвет подчеркивания в государстве :Ховер.
Вы можете пойти дальше и добавить :Focus и :Active для элементов <A>, которые будут изменять поведение ссылок во время депрессии. Или красить их в другой цвет и увеличить размер шрифта в активном состоянии. С помощью селекторов CSS для жизни даже статических HTML-страниц, и без намека на JavaScript. Автор: Cherchenko Ася 20 сентября, 2018
Категория: обо всём
