CSS псевдо-элементы
CSS псевдо-элемент используется для добавления некоторых специальных эффектов селекторы.
грамматика
Псевдо-элемент синтаксиса:
Классы CSS можно также использовать псевдо-элементы:
: Первая линия псевдоэлемент
"Первая линия" псевдо-элемент используется для установки специальный стиль к первой строке текста.
В следующем примере, браузер будет основан на "первой линии" псевдо-элемента в стиле первой строки текста элементов р формате:
Примечание: "первой линии" псевдо-элемент может быть использован только для элементов уровня блока.
Примечание: Следующие свойства могут быть применены к "первой линии" псевдо-элемента:
- свойства шрифта
- цветовые свойства
- свойства фона
- слово-интервал
- письмо-разнос
- текст-отделка
- вертикально-Align
- текст-преобразования
- высота линии
- ясно
: Во-первых букв псевдо-элемент
"Первое письмо" псевдо-элемент используется для установки специальный стиль к первой букве текста:
Примечание: "первой буквы" псевдо-элемент может быть использован только для элементов уровня блока.
Примечание: Следующие свойства могут быть применены к "первой букве" псевдо-элемента:
- свойства шрифта
- цветовые свойства
- свойства фона
- свойств полей
- свойства обивка
- свойства границ
- текст-отделка
- вертикально-Align (только если "плавать" является "ни один")
- текст-преобразования
- высота линии
- поплавок
- ясно
Псевдо-элементы и классы CSS
Псевдо-элементы могут быть объединены с классами CSS:
<p class="article">A paragraph in an article</p>
Приведенный выше пример будет делать все класс, как первая буква абзаца статьи становится красным.
Несколько Псевдоэлементы
Множество псевдо-элементов могут быть объединены в использовании.
В следующем примере, первый абзац письма будет отображаться красным цветом, размер шрифта хх-большой. Первая строка остальной части текста будет синим, а небольшие заглавные буквы.
Остальные пункты текста по размеру шрифта по умолчанию и цвет для отображения:
примеров
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
Попробуйте »
CSS -: перед тем псевдо-элемента
"Перед" псевдо-элемент может вставить новое содержание в передней части содержимого элемента.
Следующий пример, чтобы вставить изображение в передней части каждого элемента <h1>:
CSS -: после того, как псевдо-элемента
": После того, как" псевдо-элемент может вставить новое содержание после того, как содержимое элемента.
Следующие примеры вставки изображения после каждого элемента <h1>:
Все CSS псевдо-классы / элементы
| селектор | пример | Пример показывает, |
|---|---|---|
| : ссылка | a:link | Выбрать все непосещенные ссылки |
| : посетил | a:visited | Выделить все посещенные ссылки |
| : активный | a:active | Выбор является активной ссылкой |
| : Hover | a:hover | Поместите курсор на состояние линии связи |
| : фокус | input:focus | После выбора входной элемент имеет фокус |
| : Во- первых букв | p:first-letter | Выберите первую букву каждого элемента <p> |
| : Первая линия | p:first-line | Выберите первую строку каждого элемента <p> |
| : Первый ребенок | p:first-child | <] P> селектор элемента соответствует любому элементу, принадлежащий к первому элементу ребенка |
| : перед тем | p:before | Вставить содержимое перед каждым элементом <p> |
| : после того, как | p:after | Вставить содержимое после каждого <р> элемент |
| : Языки (язык) | p:lang(it) | Выбор атрибута Ланг <р> элемент начального значения |