Смущен псевдоклассом CSS: активный - PullRequest
Новая
       5

Смущен псевдоклассом CSS: активный

8 голосов
/ 18 февраля 2011

Я искал здесь на CSS: активный селектор.

: стили активного селектора ссылаются на активные страницы

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

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

Псевдокласс: active применяется в то время как элемент активируется пользователь. Например, между временами пользователь нажимает кнопку мыши и выпускает его.

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

<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>

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

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

Я видел это хороший совет , когда гуглил, но не думаю, что это связано.

Ответы [ 3 ]

26 голосов
/ 18 февраля 2011

В CSS нет понятия "активная страница". Фактически, SitePoint Reference опровергает это, говоря:

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

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

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

p:active {
    color: red;
}

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

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

1 голос
/ 18 февраля 2011

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

0 голосов
/ 18 февраля 2011

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

Пример: 

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

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

...