Разница между псевдоклассами и псевдоэлементами
(1) Класс, определяемое пользователем имя класса. Этот класс является конкретным и видимым, например div.div0. Выберите элемент div с классом div0.
(2) Псевдокласс, используемый для добавления специальных эффектов к определенным селекторам. Стили, определенные с помощью псевдоклассов, действуют не на метку, а на ее состояние, например :hover для тега a и :disabled для элемента формы.
(3) Такие элементы, как div, p, h1 и т. д., являются реальными элементами.
(4) Псевдоэлементы — это элементы, которые не существуют в HTML и используются только для рендеринга в CSS. Этот контейнер не содержит элементов DOM, но может содержать контент. Например, ::before, ::after.
Селектор псевдоклассов
Цель псевдоклассов — использовать селекторы для поиска информации, которой нет в дереве DOM и которую невозможно получить с помощью обычных селекторов CSS. Псевдоклассы обычно представляют собой «состояние». Псевдокласс начинается с двоеточия: за ним следует имя псевдокласса и необязательные параметры, заключенные в круглые скобки.
псевдокласс привязки
Если вы задаете четыре состояния тега, порядок должен быть LVHA, то есть: ссылка, :посещено, :hover, :активно.
В обычных обстоятельствах вам нужно только установить эффект по умолчанию для тега и эффект пересечения мыши, a{}, a:hover{}.
селектор целевого псевдокласса
:target Стиль цели после гиперссылки. При использовании гиперссылки цель ссылки можно установить с помощью селектора цели. Соответствующий стиль будет отображаться только после перехода к цели.
Значение атрибута href тега a может указывать на адрес ссылки, идентификатор тега или имя тега a.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;</style><p><ahref=#news1>Кнопка 1</a></ p><p><ahref=#news2>Кнопка 2</a></p><aname=news1>Содержимое 1</a><divid=news2>Содержимое 2</div>При нажатии кнопки 2 отображается результат:
Селектор псевдокласса элемента формы
:in-range работает только с элементами, которые могут указывать значения интервала, например атрибуты min и max во входном элементе;
:invalid работает только с элементами, которые могут указывать значения интервала, такие как атрибуты min и max в |input элементе, правильное поле электронной почты, допустимые числовые поля и т. д.
Структурный селектор псевдокласса
<style>p:first-child{color:red;}/*Первый элемент — h1, поэтому он не выбран*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*Четвертый элемент — это диапазон, поэтому он не выбран*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/* Выбрана 7-я р, но стиль перезаписан*/p:only-of-type{color:orange;}/*Выбраны 7-я и 8-я р*/</style><h1>Заголовок 1</ h1 ><p>Первый п</p><p>Второй п</p><span>Текстовое содержимое</span><p>Третий п</p><p>Четвертый п</p> <p><i>Текстовое содержание</i>Пятый стр</p><p>Шестой стр</p><h5>Заголовок 5</h5><div><p>Седьмой стр</p ></div><div><p>Восьмой р.</p><span>Текстовое содержимое.</span></div><div><p>Девятый р. </p><p>Десятый р. </p></div>Результаты запуска:
Отменить селекторы псевдоклассов
Псевдоэлемент
Псевдоэлементы создают некоторые абстрактные элементы в дереве DOM. Эти абстрактные элементы не существуют в языке документа (их можно понимать как исходный код HTML). Например: интерфейс документа не предоставляет механизма доступа к первому слову или строке содержимого элемента, но псевдоэлементы позволяют разработчикам извлекать эту информацию. Более того, некоторые псевдоэлементы позволяют разработчикам получать контент, которого нет в исходном документе. Псевдоэлемент начинается с двух двоеточий::, за которыми следует имя псевдоэлемента.
Проще говоря, псевдоэлементы создают виртуальный контейнер, который не содержит никаких элементов DOM, но может содержать контент.
В селекторе псевдоэлемента в CSS3 и селекторе псевдокласса в CSS2 до и после абсолютно одинаковы.
Есть только следующие псевдоэлементы:
Атрибут содержимого используется с псевдоэлементами :before и :after для вставки сгенерированного контента. Вы можете использовать псевдоклассы + псевдоэлементы.
Вес стиля CSS
Правила приоритета CSS:
(1) Когда значения веса правил выбора CSS различны, приоритет будет иметь тот, у которого более высокое значение веса;
(2) Когда значения веса правил выбора CSS одинаковы, правило, определенное позже, имеет приоритет;
(3) Когда !importand добавляется после атрибута CSS, будет предоставлен безусловный абсолютный приоритет;
Расчет значения веса: