Псевдокласс CSS :active представляет элемент (например,кнопку),который активируется пользователем.
:focus-это когда элемент может принимать ввод-курсор в поле ввода или ссылка,на которую была установлена вкладка.:active-это когда элемент активируется пользователем-время между нажатием пользователем кнопки мыши и ее отпусканием.
Псевдокласс :active CSS представляет элемент (например, кнопку), который активируется пользователем. При использовании мыши «активация» обычно начинается, когда пользователь нажимает основную кнопку мыши.
active относится к простому css-классу,который вы (или ваша программа)должны применить к элементу.Поэтому,отвечая на ваш второй вопрос,первый класс применяется автоматически браузером,как только пользователь щелкнул (активировал)ссылку на вашей веб-странице,тогда как второй класс никогда не применяется автоматически.Сохраните этот ответ.
Ссылка становится активной,когда вы нажимаете на нее.
Селектор :hover используется для выбора элементов при наведении на них курсора мыши.Совет:Селектор :hover можно использовать для всех элементов,а не только для ссылок.Совет:Используйте селектор :link для стилизации ссылок на непосещенные страницы,селектор :visited-для стилизации ссылок на посещенные страницы,а селектор :active-для стилизации активной ссылки.
:active CSS псевдо-класс представляет собой элемент (например, кнопки) , которая активируется пользователем. При использовании мыши «активация» обычно начинается, когда пользователь нажимает на основную кнопку мыши.
Try it
Псевдокласс :active обычно используется для элементов <a> и <button> .
Другие общие цели этого псевдокласса включают элементы, которые содержатся в активированном элементе, и элементы формы, которые активируются через связанный с ними <label> .
Стили, определенные псевдоклассом :active , будут переопределены любым последующим псевдоклассом, связанным со ссылкой ( :link , :hover или :visited ), который имеет по крайней мере равную специфичность. Чтобы оформить ссылки соответствующим образом, поместите правило :active после всех других правил, связанных со ссылками, в соответствии с порядком LVHA : :link — :visited — :hover — :active .
Примечание. В системах с многокнопочными мышами CSS указывает, что псевдокласс
Syntax
:active
Examples
Active links
HTML
<p>This paragraph contains a link: <a href="#">This link will turn red while you click on it.</a> The paragraph will get a gray background while you click on it or the link. </p>
</a>
The paragraph will get a gray background while you click on it or the link.
</p>
CSS
a:link { color: blue; } / * Непосещенные ссылки * /
a:visited { color: purple; } / * Посещенные ссылки * /
a:hover { background: yellow; } / * Зависшие ссылки * /
a:active { color: red; } / * Активные ссылки * /
p:active { background: #eee; } / * Активные абзацы * /
Result
Элементы активной формы
HTML
<form> <label for="my-button">My button: </label> <button type="button">Try Clicking Me or My Label!</button> </form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Result
Specifications
| Specification |
|---|
| HTML Standard # selector-active |
| Селекторы уровня 4 # the-active-pseudo |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | |
:active | 1 | 12 | 1 | 4 | 5 | 1 | 4. | 18 | 4 | 10.1 | 1 | 1.0 |
non_a_elements | 1 | 12 | 1 | 8 | 7 | 1 | 4.4 | 18 | 4 | 14 | 1 По умолчанию Safari в iOS не использует состояние | 1.0 |
4See also
- Link связанных с псевдо-классы:
:link,:visited, и:hover
- 1
- …
- 36
- 37
- 38
- 39
- 40
- …
- 857
- Next
CSS
- ::spelling-error
-
Экспериментальный:Эта технологияПеред использованием продукции внимательно проверьте таблицу совместимости браузеров.
- ::target-text
- Экспериментальный:Эта технологияПеред использованием продукции внимательно проверьте таблицу совместимости браузеров.
- :any-link
- Селектор CSS псевдокласса :any-link представляет элемент,который является исходным якорем гиперссылки,независимо от того,был ли он посещен.
- :autofill
-
Псевдокласс :autofill CSS соответствует, когда значение элемента <input> автоматически заполняется браузером.
CSS3 | Псевдоклассы
Последнее обновление: 21.04.2016
В дополнение к селекторам тегов, классов и идентификаторов нам доступны селекторы псевдоклассов, которые несут дополнительные возможности по выбору нужных элементов.
Список доступных псевдоклассов:
:root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент
<html>:link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход
:visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил
:active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход
:hover: представляет элемент, на который пользователь навел указатель мыши.
Применяется преимущественно к ссылкам, однако может также применяться
и к другим элементам, например, к параграфам:focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши на поле ввода (например, текстовое поле)
:not: позволяет исключить элементы из списка элементов, к которым применяется стиль
:lang: стилизует элементы на основании значения атрибута
lang:empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми
Применяется преимущественно к ссылкам, однако может также применяться
и к другим элементам, например, к параграфамПри применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы в CSS3</title>
<style>
a:link {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover {color:red; text-decoration:underline}
a:active {color:yellow; text-decoration:underline}
input:hover {border:2px solid red;}
</style>
</head>
<body>
<a href="index. html">Учебник по CSS3</a>
<input type="text" />
</body>
</html>
html">Учебник по CSS3</a>
<input type="text" />
</body>
</html>
Селектор :not
Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
a:not(.blueLink) { color: red; }
</style>
</head>
<body>
<a>Первая ссылка</a><br/>
<a>Вторая ссылка</a><br/>
<a>Третья ссылка</a>
</body>
</html>
Селектор a:not(.blueLink) применяет стиль ко всем ссылкам за исключением тех, которые имеют класс «blueLink». В скобки псевдоклассу
not передается селектор элементов, которые надо исключить.
Псевдокласс :lang
Селектор :lang выбирает элементы на основании атрибута lang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
:lang(ru) {
color: red;
}
</style>
</head>
<body>
<form>
<p lang="ru-RU">Я изучаю CSS3</p>
<p lang="en-US">I study CSS3</p>
<p lang="de-DE">Ich lerne CSS3</p>
</form>
</body>
</html>
НазадСодержаниеВперед
:active — CSS: Каскадные таблицы стилей
Псевдокласс CSS :active представляет элемент (например, кнопку), активируемый пользователем.
При использовании мыши «активация» обычно начинается, когда пользователь нажимает основную кнопку мыши.
Псевдокласс :active обычно используется для элементов и . Другие общие цели этого псевдокласса включают элементы, которые содержит в активированный элемент и формирует элементы, которые активируются через связанные с ними .
Стили, определенные псевдоклассом :active , будут переопределены любым последующим псевдоклассом, связанным со ссылкой ( :link , :hover или :visited ), который имеет как минимум равную специфичность. Чтобы правильно оформить ссылки, поместите правило :active после всех других правил, связанных со ссылками, как определено в LVHA-заказ : : ссылка — : посещение — : наведение — : активно .
Примечание: В системах с многокнопочными мышами CSS указывает, что псевдокласс :active должен применяться только к основной кнопке; на мышах-правшах это обычно самая левая кнопка.
:активный
Активные ссылки
HTML
В этом абзаце есть ссылка: Эта ссылка станет красной, когда вы нажмете на нее. Абзац будет иметь серый фон, когда вы нажмете на него или на ссылку.
CSS
/* Непосещенные ссылки */
ссылка {
цвет синий;
}
/* Посещенные ссылки */
а: посетил {
цвет: фиолетовый;
}
/* Наведенные ссылки */
а: наведите {
фон: желтый;
}
/* Активные ссылки */
а: активный {
красный цвет;
}
/* Активные абзацы */
р: активный {
фон: #еее;
}