И псевдоэлементы, и псевдоклассы определяются путем добавления определенного ключевого слова после селектора, следования аналогичным правилам синтаксиса и установки соответствующих стилей в блоках правил CSS. Псевдоэлементы могут добавлять или заменять контент с помощью атрибута контента. Например, :before и :after могут вставлять текст, изображения или другой сгенерированный контент. Псевдоклассы влияют только на стиль элемента, но не добавляют и не изменяют содержимое. Они меняют поведение элементов в зависимости от взаимодействия с пользователем, структуры документа или других логических условий. Основные различия заключаются в следующем:
Целевые объекты :
Селекторы псевдоклассов (псевдоклассы) действуют на реально существующие элементы и используются для описания определенного статуса или взаимосвязи элемента, например, статуса доступа к ссылке ( :visited ), статуса наведения мыши ( :hover ), и является ли это документом, первым дочерним элементом в ( :first-child ) и т. д. Они не меняют напрямую структуру элемента, но влияют на то, как элемент ведет себя в конкретных условиях. Селекторы псевдоэлементов используются для создания и выбора определенной части внутри элемента или для создания новых виртуальных узлов контента до и после элемента. Например, :before и :after можно использовать для вставки дополнительного контента, :first-line и :first-letter выбирают первую строку текста и первую букву элемента соответственно, :marker управляет стилем метки элемента списка и т. д. . Эти псевдоэлементы не соответствуют реальным элементам HTML-документа, но к ним можно применять стили, как если бы они были реальными частями документа.
Грамматический идентификатор :
Псевдоклассы обычно обозначаются двоеточием : :), например :hover , :focus . Псевдоэлементы обозначаются в CSS3 двумя последовательными двоеточиями ( :: :), чтобы отличить их от псевдоклассов в старых версиях CSS. Хотя большинство современных браузеров по-прежнему принимают одиночные двоеточия для обозначения псевдоэлементов (например :before ), чтобы соответствовать стандартам W3C и придерживаться лучших практик, рекомендуется использовать формы с двойным двоеточием, такие как ::before , ::after .
Возможность повторного использования :
Псевдоклассы можно комбинировать в одном селекторе, например a:hover:focus для представления ссылки, которая одновременно наведена и находится в фокусе. Псевдоэлементы обычно не могут появляться повторно в одном и том же селекторе, поскольку они представляют определенную часть элемента или новый сгенерированный контент. Элемент может иметь только один псевдоэлемент :before или :after действующий одновременно.
Псевдоэлементы CSS3 — это специальные селекторы CSS, которые позволяют разработчикам добавлять или изменять стили определенных частей элемента с помощью CSS без изменения структуры HTML, а также генерировать и контролировать виртуальный контент внутри или снаружи элемента. Ниже приводится подробное объяснение и примеры применения нескольких распространенных псевдоэлементов CSS3:
1. :before и :after
Каждый из псевдоэлементов :before и :after создает новый, бессодержательный, невидимый «дочерний элемент» после области содержимого выбранного элемента. Затем, задав стили (такие как содержимое, размер, цвет, фон и т. д.) этому псевдоэлементу, он становится видимым и визуально отображается как часть, следующая сразу за содержимым исходного элемента. Это содержимое определяется атрибутом content , и могут быть применены дополнительные стили.
грамматика :
селектор:до {
content: "..." /* или другое значение */;
/* Другие объявления стилей */
}
селектор:после {
content: "..." /* или другое значение */;
/* Другие объявления стилей */
} Среди них атрибут content является ключом к определению контента, создаваемого псевдоэлементами. Он может принимать следующие значения:
Строка : непосредственно укажите текст, который будет отображаться. HTML-объекты, заключенные в кавычки : например, content: "—"; ; URL-адрес : вставьте ресурсы изображения, например content: url(image.png); Создайте ключевые слова контента : например, content: counter(name); (counter) или content: attr(attribute-name); (получить значение атрибута элемента).
Примеры применения :
1.1. Добавьте декоративный контент.
Добавьте кавычки, значки или другие декоративные элементы.
Добавьте цитаты:
цитата:до {
содержание: открытая цитата;
размер шрифта: больше;
цвет: #666;
}
цитата: после {
содержание: закрытая кавычка;
}Добавьте собственные значки до/после элементов списка:
ли: до {
содержимое: URL (значок-checkmark.svg);
поле справа: 0,5em;
}
li.completed:после {
содержимое: "2713"; /* Символ Юникода: галочка */
цвет: зеленый;
размер шрифта: 1,5em;
вертикальное выравнивание: супер;
}1.2. Очистить поплавок
:after часто используется для создания пустого элемента уровня блока и используется clear:both чтобы устранить влияние плавающего элемента на последующие элементы и избежать проблемы «схлопывания высоты».
.clearfix:после {
содержание: "";
дисплей: стол;
ясно: оба;
} Примените класс .clearfix к элементам контейнера, внутренние числа с плавающей точкой которых необходимо очистить.
1.3. Заменить или расширить содержимое HTML.
Используя функцию attr() , вы можете извлечь значение из атрибута элемента как содержимое :after для достижения динамического отображения текста.
сокращение [название]:после {
содержимое: "(" attr(title) ")";
размер шрифта: меньше;
цвет: серый;
} В этом примере при наведении указателя мыши на элемент abbr с атрибутом title отображается небольшая серая скобка, содержащая значение атрибута title .
1.4. Реализация сложных фигур и анимации.
В сочетании с content , background , border и другими свойствами, а также transform , transition или animation CSS3 вы можете использовать :after для создания сложных фигур и эффектов анимации.
.button:после {
содержание: "";
отображение: встроенный блок;
ширина: 0;
высота: 0;
border-top: ⅓em сплошной прозрачный;
правая граница: ⅓em сплошной прозрачный;
нижняя граница: ⅓em сплошная #007BFF;
левая граница: ⅓em сплошной прозрачный;
поле слева: 0,½em;
}
.button:hover:после {
преобразование: TranslateY (-0,1em);
переход: преобразование 0,2 с, легкость входа и выхода;
} Приведенный выше код создает треугольную стрелку раскрывающегося списка после элемента .button и реализует плавную анимацию вниз при наведении курсора мыши.
На что следует обратить внимание
Псевдоэлемент :after необходимо использовать с атрибутом content , иначе он не будет иметь никакого эффекта. Поскольку :after — это созданный виртуальный элемент, операции DOM не могут выполняться через JavaScript. Хотя контент, созданный :after может участвовать в макете, он не включается в DOM, не влияет на семантику и не влияет на функции специальных возможностей, такие как навигация с помощью клавиатуры.
Таким образом, селекторы псевдоэлементов CSS3 значительно повышают выразительность веб-дизайна, вставляя пользовательский контент после содержимого элемента без изменения структуры HTML. Умелое использование псевдоэлементов и других методов CSS может помочь разработчикам создавать более красивые, отзывчивые и простые в обслуживании веб-интерфейсы.
2. :first-line и :first-letter
Селектор псевдоэлемента :first-line используется для стилизации первой строки текста внутри элемента, а псевдоэлемент :first-letter используется для стилизации первой буквы внутри элемента.
грамматика :
селектор: первая строка {
/* Объявление стиля */
}
селектор: первая буква {
/* Объявление стиля */
}Примеры применения :
Отступ первой строки:
статья p:первая строка {
текстовый отступ: 2em;
}Капитализация и оформление:
статья h2:первая буква {
размер шрифта: 2em;
плавать: влево;
поле справа: 0,5em;
высота строки: 0,8;
цвет: #8A2BE2;
цвет фона: #F8F8FF;
отступ: 0,⅔em 0,⅓em;
радиус границы: 0,5em;
}Селектор псевдоклассов CSS3 — это мощный инструмент, который позволяет разработчикам точно позиционировать и применять стили на основе состояния элемента, а не его положения в дереве документа или встроенных атрибутов, таких как класс и идентификатор. Эти селекторы используют специальные синтаксические структуры для описания различных условных состояний элементов, таких как взаимодействие с пользователем, позиционные отношения, характеристики контента и т. д., тем самым достигая динамичного и адаптивного веб-дизайна. Ниже приводится подробное объяснение селекторов псевдоклассов CSS3 и примеры их практического применения.
1. Статический селектор псевдоклассов
:link и :visited
:link : используется для выбора гиперссылок (элементов <a> ), которые не посещал пользователь. Обычно используется для установки основных стилей для непосещенных ссылок.
а: ссылка {
цвет: синий;
текстовое оформление: нет;
} :visited : выберите ссылки, которые посетил пользователь. Используется для установки дифференцированных стилей для посещенных ссылок.
а: посетил {
цвет: фиолетовый;
} 2. Селекторы псевдоклассов взаимодействия с пользователем :hover , :focus , :active
:hover : Соответствует элементу, когда на него наводится указатель мыши.
кнопка: наведите {
цвет фона: #f0f0f0;
курсор: указатель;
} :focus : выберите элемент, который получает фокус, обычно встречается в элементах управления формой или фокусируемых элементах (например, <input> , <textarea> , <button> и т. д.).
ввод: фокус {
контур: 2 пикселя, сплошной #007BFF;
box-shadow: 0 0 0 0,2rem rgba(0, 123, 255, 0,25);
} :active : используется для обозначения того, что пользователь активирует или нажимает элемент (обычно щелчком мыши или нажатием на сенсорном экране).
а: активный {
цвет: красный;
начертание шрифта: жирный;
} 3. Структурированные селекторы псевдоклассов :first-child , :last-child , :only-child , :nth-child(n) и т. д.
:first-child : выбирает элемент, который является первым дочерним элементом родительского элемента.
ли:первый ребенок {
Тип стиля списка: квадрат;
} :last-child : выбирает элемент, который является последним дочерним элементом родительского элемента.
div > p: последний ребенок {
поле-дно: 0;
} :only-child : выберите элементы, у которых нет братьев и сестер.
.message:only-child {
ширина границы: 2 пикселя;
} :nth-child(n) : выберите n-й дочерний элемент родительского элемента, где n может быть числом, ключевым словом ( even , odd ) или формулой (например, 2n+1 ).
li:nth-child(2n) {
цвет фона: #f9f9f9;
}4. Селекторы псевдоклассов, связанные с контентом
:empty , :target , :enabled , :disabled , :checked и т. д.
:empty : выберите элементы без какого-либо содержимого (включая дочерние элементы, текстовые узлы и т. д.).
div.empty: пустой {
дисплей: нет;
} :target : выберите элемент, текущий идентификатор фрагмента URL-адреса которого (хэш) соответствует идентификатору элемента.
#content:target {
цвет фона: светло-желтый;
} :enabled и :disabled: выберите элементы формы во включенном и отключенном состояниях соответственно.
ввод: включено {
цвет фона: белый;
}
ввод: отключено {
непрозрачность: 0,6;
курсор: не разрешен;
} :checked : используется, когда выбран флажок ( <input type="checkbox"> ), переключатель ( <input type="radio"> ) или элемент <option> .
input[type="checkbox"]:проверено + метка {
оформление текста: сквозное;
}5. Отменить селекторы псевдоклассов
:not(selector)
:not() : выбирает элементы, которые не соответствуют селектору, указанному в скобках.
/* За исключением всех абзацев с классом «exclude» */
р: не(.исключить) {
цвет: зеленый;
}6. Другие селекторы псевдоклассов
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type и т. д.
:root : выберите корневой элемент документа (обычно элемент <html> в HTML-документах).
:корень {
--основной цвет: #3498db;
} :nth-of-type(n) и :nth-last-of-type(n): аналогично :nth-child(n) , но только для дочерних элементов определенного типа среди родственных элементов.
статья: n-го типа (четный) {
цвет фона: #f5f5f5;
} :first-of-type , :last-of-type и :only-of-type: соответственно выбирают первый, последний или единственный дочерний элемент определенного типа среди родственных элементов.
div > p: первый тип {
начертание шрифта: жирный;
}Освоив вышеупомянутые селекторы псевдоклассов CSS3 и сценарии их применения, разработчики могут писать более эффективный, выразительный и интерактивный код CSS для улучшения пользовательского опыта и визуальных эффектов веб-сайта. Поскольку стандарт CSS продолжает развиваться, к рядам CSS3 могут присоединиться все новые селекторы псевдоклассов, чтобы обеспечить более богатые и сложные методы управления для фронтенд-разработки.
Будь то псевдокласс или псевдоэлемент, все они предназначены для расширения функциональности селекторов CSS, позволяя разработчикам более точно контролировать стиль и расположение элементов без изменения структуры HTML.
На этом завершается статья о различиях, подробных объяснениях и примерах применения псевдоэлементов CSS3 и селекторов псевдоклассов. Для получения дополнительной информации о псевдоэлементах CSS3 и селекторах псевдоклассов найдите предыдущие статьи на сайте downcodes.com или продолжите просмотр. Похожие статьи ниже. Надеюсь, вы поддержите downcodes.com в будущем!