С возвращением всех.
Сегодня мы очень кратко расскажем о псевдоклассах и элементах.
Таким образом, мы работали с различными типами элементов на протяжении всего этого курса,
и как мы можем структурировать их и стилизовать их.
Ну, псевдоэлементы немного отличаются от других вещей, которые
мы видели ранее в том, что они очень зависят от структуры DOM, и
некоторые из них фактически динамически заполнены.
Итак, если честно, вы видели это раньше, когда мы говорили о стилизации
ссылок, потому что ссылки были разные состояния.
Одним из примеров, который мы использовали, была идея зависания.
Если вы наведите указатель мыши на ссылку, вы можете изменить стиль, чтобы избавиться от подчеркивания или
изменить цвет.
Итак, давайте поговорим о некоторых из этих различных типов псевдоклассов за пределами
того, что вы можете сделать только с помощью ссылки.
Я начал с того, что мы видели раньше.
Вы можете иметь ссылку, а также ссылку, которая была посещена.
Вы также можете реагировать на различные действия пользователя.
Итак, если кто-то наводит курсор на абзац или
наводит курсор на тег H1, вы все равно можете реагировать на него.
Это не просто связующее звено.
Вы также можете иметь активный, и
активный, когда вы удерживаете кнопку мыши вниз над каким-то элементом.
И последнее - фокус.
Фокус будет, когда кто-то просматривает страницу,
вы можете поместить фокус вниз на каждый из них.
Наконец, один, который имеет много смысла, и вы, вероятно, видели раньше
, заключается в том, что вы можете набрать псевдоклассы форм или интерфейсов.
Если флажок был установлен или
снят, вы можете видеть, что иногда они делают его желтым.
Или если вы когда-либо были на сайте, и вам не разрешено вводить что-то,
пока вы не вводите что-то в поле выше, выше, они, как правило, серые.
То есть, как вы могли бы пойти дальше и сделать это, вы могли бы сказать, знаете что?
Если кто-то нависнет над моим абзацем, я хочу просто сделать границу.
Граница: 1 px.
Теперь, несмотря на то, что в DOM нет места, где у них есть p: hover,
он должен работать для вас, когда вы помещаете это правило стиля в.
Таким образом, вы также можете стиль на основе
структурного положения различных элементов.
У тебя есть первый ребенок, последний ребенок, другой ребенок.
То, как один работает, это вы вставляете число, чтобы сказать пятого ребенка или
десятого ребенка.
У тебя может быть только ребенок.
У вас также есть другие разные вещи, такие как первый тип, последний тип
, только тип.
И снова, у вас просто есть элемент, двоеточие, а
затем имя псевдокласса, который вы хотите стилизовать.
Псевдоэлементы не обязательно являются частью DOM, но
они могут быть использованы для стилирования конкретных или уникальных частей страницы.
Итак, некоторые примеры могут, если у вас есть абзац, и вы хотите поместить эту
причудливую первую букву с другим шрифтом, вы можете использовать первую букву псевдоэлемента.
То же самое с первой строкой, вы можете генерировать вещи, чтобы отображаться до или
после элементов.
Много раз, если вы ставите что-то вроде информации о кредитных картах,
вы можете идти вперед и положить в различные типы кредитных карт, но
есть немного, прежде чем это говорит, и эй, положите фотографию здесь.
Вы также можете стилизовать только фрагменты различных выборок.
Теперь я не дал вам много кода, когда мы прошли здесь, потому что на самом деле использование
псевдоклассов и псевдоэлементов очень уникально для страницы, которую вы собираетесь сделать.
Поэтому позже, когда мы говорим о таблицах, следите за тем, что я буду использовать
много псевдоклассов и псевдоэлементов там.
Очень важно осознать, что я не смогу покрыть
каждую комбинацию всего, о чем мы узнаем.
Но я хочу дать вам инструменты, чтобы вы могли выйти и
исследовать, как вы можете добавить некоторые классные новые стили на свою страницу.
Удачи.