What's the :any-link pseudo-class for?

后端 未结 2 1711
别那么骄傲
别那么骄傲 2021-01-02 00:41

I don\'t know if it\'s a part of any standard, but at least two major browsers have implemented it:

  • :-webkit-any-link in Chrome
  • :-m
相关标签:
2条回答
  • 2021-01-02 01:23

    In the Mozilla CSS Extensions document, :-moz-any-link is mentioned with the note “(matches :link and :visited)”. The link to detailed information is dead, but the apparent reason for using such a pseudo-class is the odd design of CSS as regards to links: :link matches unvisited links only, whereas :visited matches visited links. Using a single selector is useful in complex cases where you would otherwise need to write two complicated selectors that differ in one pseudo-class only.

    They could use a[href], except that this would bind the selector to a specific element (and attribute) used to create links (which is a markup language issue).

    Using Firebug and inspecting a link in it, you will see the following styles from the browser default style sheet:

    *|*:-moz-any-link:not(svg|a) {
        text-decoration: underline;
    }
    :-moz-any-link {
        cursor: pointer;
    }
    

    The latter sets the shape of the mouse pointer (“cursor”) on all links. The former makes links underlined, except inside an svg element.

    0 讨论(0)
  • 2021-01-02 01:44

    :any-link is a new pseudo-class proposed in Selectors level 4, that matches all elements that would be matched by :link, :visited. From what I see, its main purpose is to simplify selectors that need to select any hyperlinks, since the naming of :link is misleading; it specifically means unvisited links only, rather than all hyperlinks (which makes it essentially the opposite of :visited).

    For the purposes of :link and :visited, WHATWG HTML and W3C HTML5 both define a "hyperlink" as any one of:

    • An <a> element that has an href attribute. This excludes named anchors (that is, <a> elements without an href attribute but instead with a name attribute), which were used traditionally to mark anchors in a page, now superseded by the use of an id attribute on any element. See named anchors in HTML 4.

    • An <area> element that has an href attribute.

    • A <link> element that has an href attribute.

    For example, consider a scenario where links in the page header should be colored differently from all other links:

    body > header > a:link, body > header > a:visited {
        color: white;
    }
    

    Notice the body > header part is duplicated across both selectors. This seems redundant, but is currently necessary in order to color links in the page header differently from the rest, but regardless of their visited state. This is because body > header > a is not specific enough which requires using !important to override anyway, and body > header > a:link troublesomely only applies to unvisited links.

    With the :any-link pseudo-class, you can simply do this instead:

    body > header > a:any-link {
        color: white;
    }
    

    Specificity is exactly the same as with each individual half, so there should be no issues there.

    Of course, since no browser implements it unprefixed yet, that won't work. As an alternative, considering you're most likely working with an HTML document anyway you can just use a[href] instead, which works in all browsers including IE7+ on top of also being equally specific:

    body > header > a[href] {
        color: white;
    }
    

    There's a much more elaborate explanation regarding the use of a versus a:link, a:visited versus a:any-link versus a[href] in this other answer of mine.

    Like anything else that has a prefix in CSS, :-moz-any-link and :-webkit-any-link exist only for experimental purposes, so you shouldn't use them with your sites. Besides, even if you were to use them right now, you'd have to duplicate the rules themselves (and not just the selectors!) since browsers have to drop entire rules on unrecognized selectors, rendering them pretty useless in real-world code!

    As of early 2013, no other implementations of :any-link exist that I know of. I'm unsure as well as to whether this was implemented by the respective vendors and then proposed for inclusion in Selectors 4, or if it was preliminarily specced before the vendors began implementing it, but I don't think that matters.

    Speaking of which, be sure not to confuse the :-moz-any-link/:-webkit-any-link pseudo-class with :-moz-any()/:-webkit-any(), the latter of which is specced as :matches() instead (possibly to avoid naming confusion?).

    0 讨论(0)
提交回复
热议问题