CSS псевдо-классы
CSS селекторы псевдо-класса используются, чтобы добавить некоторые специальные эффекты.
грамматика
Псевдо-класс синтаксис:
Классы CSS можно также использовать псевдо-класс:
классы якорными псевдо
Поддержка CSS в браузерах, другое состояние ссылки могут отображаться различными способами
примеров
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Попробуйте »
Примечание: определение CSS, а: зависать должен быть помещен в: канал связи и: после того, как посетил, является эффективным.
Примечание: определение CSS, а: активный должен быть помещен в: Hover после того , чтобы быть эффективными.
Примечание: Название псевдо-класса не чувствительны к регистру.
Псевдо-классы и классы CSS
Псевдо-классы могут использоваться совместно с классами CSS:
<a class="red" href="css-syntax.html"> CSS Синтаксис </a>
Если посетили ссылку выше, например, она будет отображаться красным цветом.
CSS -: во-первых - ребенок псевдо-класс
Вы можете использовать: первый ребенок псевдо-класс выбирает первый дочерний элемент
Примечание: Вы должны быть объявлены в предыдущей версии IE8 <! DOCTYPE> , как это: первый ребенок вступит в силу.
Матч первый элемент <p>
В следующем примере селектор соответствует элементу <р> в качестве первого ребенка каких-либо элементов элементов:
примеров
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Попробуйте »
Матч все элементы <p> в первом элементе <I>
Первая <я> в следующем примере, селектор соответствует любому элементу <p>:
примеров
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Попробуйте »
<H2 Match все как первый дочерний элемент элемента <р> во всех <I> элементы:
примеров
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Попробуйте »
CSS -: Ланг псевдо-класс
: Lang псевдо-класс позволяет иметь возможность для разных языков определять специальные правила
Примечание: IE8 должен объявить <DOCTYPE!> Для поддержки; языки псевдо-класс.
В следующем примере ,: значение атрибута Ланг типа класса Q нет определений элементов цитаты:
примеров
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Попробуйте »
Другие примеры
Добавить различные стили к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Использование: фокус
Этот пример демонстрирует, как использовать: фокус псевдо-класс.
Все CSS псевдо-классы / элементы
| селектор | пример | Пример показывает, |
|---|---|---|
| : проверено | input:checked | Все выбранные элемент формы |
| : отключено | input:disabled | Выделить все элементы формы для инвалидов |
| : пусто | p:empty | Выбрать все элементы р не имеют детей |
| : включен | input:enabled | Выберите все задействованные элементы формы |
| : Первый из типа | p:first-of-type | Выберите каждый родительский элемент является первым дочерним элементом р р элементы |
| : В дальности | input:in-range | Выберите значения элемента в пределах заданного диапазона |
| : недействительный | input:invalid | Выделить все недействительные элементы |
| : Последний ребенок | p:last-child | Выделить все элементы р в последний дочерний элемент |
| : Последний из типа | p:last-of-type | Выберите каждый элемент р является последним элементом родительского элемента р |
| : Нет (селектор) | :not(p) | Выберите все, кроме р элементов |
| : П-го ребенка (п) | p:nth-child(2) | Выделить все элементы р во втором подэлемента |
| : П-го последнего ребенка (п ) | p:nth-last-child(2) | Выберите все элементы обратной р второго дочернего элемента |
| : П-го последнего из-типа (п) | p:nth-last-of-type(2) | Выделить все элементы р является обратной второго суб-элемента р |
| : П-го из-типа (п ) | p:nth-of-type(2) | Выделить все элементы р во втором подэлемента для р |
| : Только-оф-типа | p:only-of-type | Выбрать все только дочерний элемент из р элементов |
| : Только-ребенок | p:only-child | Выбрать все только дочерний элемент из р элементов |
| : по желанию | input:optional | Выберите не "необходимый" атрибут элемента |
| : Вне диапазона | input:out-of-range | Выберите элемент атрибута вне указанного диапазона значений |
| : Только для чтения | input:read-only | Выберите атрибут только для чтения атрибутов элементов |
| : Чтение-запись | input:read-write | Выберите не только для чтения атрибут свойств элементов |
| : требуется | input:required | Выберите "требуется" атрибут определяет свойства элемента |
| : корень | root | Выберите корневой элемент документа |
| : мишень | #news:target | Выберите текущую активность #news элемент (нажать на URL, который содержит имя якоря) |
| : действительный | input:valid | Выберите все допустимые значения для свойств |
| : ссылка | 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) | Выбор атрибута Ланг <р> элемент начального значения |