Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
654 views
in Technique[技术] by (71.8m points)

css selectors - Confused by CSS pseudo-class :active

I was looking here at CSS :active Selector.

The :active selector styles 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...