Confused by CSS pseudo-class: active

Я искал here в CSS: активный селектор.Confused by CSS pseudo-class: active

В: активные стили селекторные ссылки на активных страниц

Это заставило меня задуматься, что щеколда является «активная страница» в терминологии HTML/CSS ...

На этом Я пошел в раздел w3docs Раздел: 5.11.3 Динамические псевдоклассы:: hover,: active и: focus.

: активный псевдо-класс применяется, элемента активируется с помощью пользователя. Например, между моментами пользователь нажимает кнопку мыши, и освобождает его.

Так что я использовал один из w3shools try it pages и рубить вместе пример, подставляя следующий код, который вы можете просто вырезать & пасту и попробовать.

<html> 
<head> 
<style type="text/css"> 
:focus,:active 
{ 
outline-offset: 10px; 
outline: solid; 
} 
</style> 
</head> 

<body> 
<p>Click the links to see the background color become yellow:</p> 
<a href="http://www.w3schools.com">w3schools.com</a> 
<a href="http://www.wikipedia.org">wikipedia.org</a> 
<button type="button">Click Me!</button> 
<form> 
<input type="text"/> 
</form> 
</body> 
</html>

Поле формы работает для: фокуса. Но кнопка или ссылки не работают для: active.

Почему? Есть что-то в «активной странице». Я не понимаю, о чем говорили w3schools.

Я видел это nice tip, когда Googling для него, но я не думаю, что это связано.

источник

2011-02-18 JGFMK

В CSS нет концепции «активной страницы». На самом деле, SitePoint Reference развенчивает это, говоря:

Псевдокласс делает не означает ссылку на активной или текущей, страницы-это распространенное заблуждение среди CSS новичков.

Что спецификация говорит правильно: :active просто стили элементов, которые активированные, например, щелчок (как в приведенном примере) или каким-то другим способом запускается так, что браузер начинает навигацию к цели ссылки.

Обратите внимание, что оно относится не только к <a> элементам; он может применяться к любому элементу ввода без формы, который был нажат. Например, вы можете сделать это:

p:active { 
    color: red; 
}

И любой абзац, который вы нажмете, будет мигать его текстом красного цвета.

Однако обратите внимание, что точное определение и реализация оставляются в браузер, но вообще, вы можете рассчитывать на <a> элементов, имеющих активированное состояние.

источник

2011-02-18 18:56:38 BoltClock

:active - это стиль, присвоенный элементу (a или кнопка, например), когда мышь удерживается над ним.Возможно, вы видели его на некоторых сайтах, когда вы нажимаете стилизованную кнопку; когда вы фактически нажмите кнопку, он может измениться. Это псевдокласс класса :active.

источник

2011-02-18 18:58:18 Bojangles

Я понял это уже. Это была вводящая в заблуждение активная страница, которую вызвали w3schools. Выше уже описано @zzzBov & @ BoltClock – JGFMK

Я всегда использовал :active для ссылок. Долю секунды до браузер принимает вас на страницу, которую вы только что нажали на текст изменится на цвет, который называется в a:active{ ... }

Пример:

a:active { color:pink; font-weight:bold; }

Большинство браузеров поддерживают его, но это действительно не стоит ваше время, чтобы его стиль. Вернувшись в день подключения 56k, было приятно, что нужно визуально показать, что загружаемая пользователем ссылка была загружена.

источник

2011-02-18 19:00:16 AJMaxwell

Confused by CSS pseudo-class: active

ответ

Смежные вопросы