翻譯不完整。請協助 翻譯此英文文件

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

The :active pseudo-class is commonly used on <a> and <button> elements. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.

Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-order: :link:visited:hover:active.

注意: 在多按鍵滑鼠的系統下, CSS3 指定 :active 偽類只對主按鈕有作用; 在右手的滑鼠上, 通常是最左邊的按鍵.

語法

:active

範例

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>

CSS

a:link { color: blue; }          /* Unvisited links */
a:visited { color: purple; }     /* Visited links */
a:hover { background: yellow; }  /* Hovered links */
a:active { color: red; }         /* Active links */

p:active { background: #eee; }   /* Active paragraphs */

結果

Active form elements

HTML

<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

結果

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':active' in that specification.
Living Standard  
Selectors Level 4
The definition of ':active' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':active' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of ':active' in that specification.
Recommendation No change.
CSS Level 1
The definition of ':active' in that specification.
Recommendation Initial definition.

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 4Opera Full support 5Safari Full support 1WebView Android Full support 1Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android ?
Non-a element supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

文件標籤與貢獻者

此頁面的貢獻者: weichengcing
最近更新: weichengcing,