CSS вводит концепции псевдоклассов и псевдоэлементов для форматирования информации за пределами дерева документа. Другими словами, псевдоклассы и псевдоэлементы используются для изменения частей, которых нет в дереве документа, например, первая буква в предложении или первый элемент в списке, или когда указатель мыши наведен на определенный элемент. Стиль, который будет установлен, когда гиперссылка включена.
Что такое псевдоэлементы?
Псевдоэлементы: используются для создания некоторых элементов, которых нет в дереве документа, и добавления к ним стилей. На самом деле псевдоэлементы — это вещи, которые обычные селекторы не могут сделать до или после определенных элементов. Содержимое элемента управления такое же, как и у элемента, но оно само по себе является абстракцией на основе элемента и не существует в структуре документа. Например, мы можем использовать :before, чтобы добавить текст перед элементом и добавить стили к этому тексту.
Характеристики элемента
1. Преимущества:
(1) Не занимайте узлы DOM и уменьшите количество узлов DOM.
(2) Позвольте CSS помочь решить некоторые проблемы JavaScript и упростить разработку.
(3) Избегайте добавления бессмысленных элементов страницы.
2. Недостатки:
(1) Не способствует отладке.
(2) Псевдоэлементы на самом деле не отражаются в содержимом документа, а отражаются только в визуальном эффекте, поэтому к псевдоэлементам нельзя добавить практическое содержание, и эта часть контента не будет сканироваться поисковыми системами.
CSS предоставляет ряд псевдоэлементов, как показано в следующей таблице:
1. ::после
Псевдоэлемент::after может вставлять некоторый контент после указанного элемента. В ::after вам необходимо использовать атрибут содержимого, чтобы определить добавляемый контент, а в ::after вы должны определить атрибут содержимого, чтобы он вступил в силу. (содержимое вставлять не требуется). Значение атрибута содержимого может быть определено как пустое).
2. ::до
Псевдоэлемент::before может вставлять некоторый контент перед указанным элементом. Подобно ::after, атрибут содержимого также необходимо использовать в ::before, чтобы определить добавляемый контент, а атрибут содержимого должен быть определен в ::before, чтобы он вступил в силу (когда нет контента для вставки, значение атрибута содержимого может быть определено как ноль).
3. ::первая буква
Псевдоэлемент::first-letter используется для установки стиля первого символа содержимого в указанном элементе. Обычно он используется с атрибутами font-size и float для создания эффекта буквицы. Следует отметить, что псевдоэлемент ::first-letter можно использовать только для элементов уровня блока. Если встроенные элементы хотят использовать этот псевдоэлемент, их необходимо сначала преобразовать в элементы уровня блока.
4. ::первая линия
Псевдоэлемент::first-line используется для установки стиля первой строки содержимого в указанном элементе. Подобно ::first-letter, псевдоэлемент::first-line можно использовать только для элементов уровня блока. . Встроенные элементы хотят использовать этот псевдоэлемент, вам необходимо сначала преобразовать его в элемент уровня блока.
5. ::выбор
Псевдоэлемент::selection используется для установки стиля при выборе объекта. Следует отметить, что псевдоэлемент::selection может определять только цвет, фон, курсор, контур и тень текста, когда элемент выбран (IE11). пока не поддерживает его. Определите этот атрибут) и другие атрибуты.
6. ::заполнитель
Псевдоэлемент::placeholder используется для установки текста-заполнителя (текста, заданного через атрибут HTML-заполнителя) элементов формы (элементы <input>, <textarea>).