В чем разница между: focus и: active?

В чем разница между :focusи :activeпсевдо-классами?

:focusи :activeдва разных состояния.

• :focus представляет состояние, когда элемент в настоящее время выбран для получения ввода и
• :active представляет состояние, когда элемент в данный момент активируется пользователем.

Например, скажем, у нас есть <button>. Не <button>будет никакого состояния для начала. Это просто существует. Если мы используем Tab«фокус» для этого <button>, теперь он входит в свое :focusсостояние. Если вы затем нажмете (или spaceнажмете), вы затем заставите кнопку войти в ее состояние ( :active).

На этой ноте, когда вы нажимаете на элемент, вы даете ему фокус, который также культивирует иллюзию, что :focusи :activeто же самое. Они не одинаковы. При нажатии кнопка находится в :focus:activeсостоянии.

Пример:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

редактировать: jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Источник: CSS Псевдо-классы

Есть четыре случая.

1. По умолчанию активный и фокус оба выключены.
2. При закладке в цикле через форматируемых элементов , они войдут :focus(без активной).
3. При нажатии на элемент без фокусировки , он входит :active(без фокуса).
4. Когда вы нажимаете на фокусируемый элемент, он входит :active:focus(активен и фокусируется одновременно).

Пример:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Когда страница загружается, оба находятся в случае 1. Когда вы нажимаете клавишу Tab, вы фокусируете второй элемент Div и видите, что он демонстрирует случай 2. Когда вы нажимаете на первый элемент Div, вы видите случай 3. Когда вы нажимаете второй элемент Div, вы видите случай 4 ,

Является ли элемент фокусируемым или нет - это другой вопрос . Большинство не по умолчанию. Но, с уверенностью предположить <a>, <input>, <textarea>являются фокусируемыми по умолчанию.

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

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

Активен, когда пользователь активирует эту точку (как при щелчке мышью, если мы используем вкладку из поля в поле, в активном стиле нет знака. Возможно, нажатие требует больше времени, просто попробуйте удерживать нажатой эту точку), фокусировка происходит после того, как точка активирована. Попробуй это :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

Фокус может быть дан только с клавиатуры ввода, но элемент может быть активирован с помощью мыши или клавиатуры.

Если бы вы использовали: фокус на ссылку, правило стиля будет применяться только при нажатии кнопки на клавиатуре.

Использование «фокуса» даст пользователям клавиатуры тот же эффект, который пользователи мыши получают при наведении курсора мыши. «Активный» необходим для получения того же эффекта в Internet Explorer.

Реальность такова, что эти состояния не работают, как они должны для всех пользователей. Неиспользование всех трех селекторов создает проблемы с доступностью для многих пользователей с клавиатурой, которые физически не могут использовать мышь. Я приглашаю вас принять вызов #nomouse (nomouse dot org).