Confused by CSS pseudo-class :active_问答_开发者

开发者 https://www.devze.com 2023-02-11 18:17 出处：网络

I was looking here at CSS :active Selector. The :active selector st开发者_运维百科yles links to

I was looking here at CSS :active Selector.

The :active selector st开发者_运维百科yles links to active pages

That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...

At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.

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

The form field works for :focus. But the button or links don't work for :active.

Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.

I saw this nice tip when Googling for it, but I don't think it's related.

There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:

The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.

What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.

Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:

p:active {
    color: red;
}

And any paragraph you click will flash its text red.

Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.

:active is the style given to an element (a or a button, for example) when the mouse is held down over it. You might have seen it visible on some sites when you click a styled button; when you actually click the button, it might change. This is the :active pseudo-class.

I've always used :active for links. The split second before the browser takes you to the page you just clicked on, the text would change to the color you called in a:active{ ... }

Example:

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

Most browsers support it, but it's really not worth your time to style it. Back in the day of 56k dial up it was a nice thing to have to visually show that the link the user clicked was being loaded.