This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 23rd article in the Series on “Four Pseudo-class selectors related to Hyperlinks (ELEMENT A)”.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

In this article we will learn what pseudo-class selectors are associated with hyperlinks (a elements), as follows:

:link pseudo-class selector

The link pseudo-class selector provided in CSS is used to select elements that have not been accessed and must contain the href attribute. The following example code shows the use of the link pseudo-class selector:

a:link {
    color: red;
}
Copy the code

In fact, the above is used to directly use a tag selector can also be achieved, example code is as follows:

a {
    color: red;
}
Copy the code

The code run result is as follows:

In fact, in the actual development :link pseudo-class is rarely used, generally using a tag selector directly instead.

Tips: You can implement whether elements are disabled by using the :link pseudo-class selector (when disabled, the href attribute is removed).

:visited Pseudo-class selectors

The visited pseudo-class selector is used to select links that have already been visited. The pseudo-class selector has many limitations, as follows:

  • The CSS properties allowed are very limited, and only color related properties such as color, background-color, and border-color are allowed.

  • When setting colors, if using RGBA () or HSLA () to set transparent colors, a(α) lPHa is valid only 0 and 1

  • The attributes set by this element must be those of the link element itself. That is, the Visited pseudo-class selector can only reset the style of the link, not set it itself.

The following code shows the use of the visited pseudo-class selector:

The HTML structure is as follows:

<body>
    <a href="" class="visited1">This element sets the background-color attribute</a>
    <hr />
    <a href="" class="visited2">This element has no background-color attribute set</a>
</body>
Copy the code

The CSS code is as follows:

.visited1 {
    color: violet;
}
.visited2 {
    color: violet;
    /* Set a background color, otherwise: the background color of visited pseudo-classes will be invalid */
    background-color: red;
}

a:visited {
    color: # 666;
    background-color: lawngreen;
}
Copy the code

The code run result is as follows:

The difference between visited and not visited depends on whether the href attribute is null.

There is also the concept of priority in CSS. In order to prevent the effect of some pseudo-classes from being overwritten, the order of convention is: Link – :visited – : Hover – :active.

Hover pseudo-class :active pseudo-class we will learn later.

:any-link Pseudo-class selector

The any-link selector in CSS matches all elements that contain the href attribute, regardless of whether they have been accessed.

The elements that contain the href attribute are , , and

elements. Since the element is rarely used. All that says :any-link pseudo-classes use only elements.

The following code shows the use of the any-link pseudo-class:

a:any-link {
    color: tomato;
}
Copy the code

The code run result is as follows:

The default style of the Browser element in the WebKit kernel is implemented through the any-link pseudo-class, as shown below:

:target pseudo-class selector

The target pseudoclass provided in CSS is the closest pseudoclass selector to the anchor point. The pseudoclass matches the element that matches the current anchor point.

What is an anchor and how to use it was explained in the last article.

The following code shows the use of the target pseudo-class:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Target pseudo-classes</title>
        <style>
            h1:target {
                color: lightcoral;
                font-size: 2.4 em;
            }
        </style>
    </head>
    <body>
        <a href="#third">Jump to the third H tag</a>
        <h1>The first H tag</h1>
        <h1>The second H tag</h1>
        <h1 id="third">The third H tag</h1>
        <h1>The fourth H tag</h1>
        <h1>The fifth H label</h1>
    </body>
</html>
Copy the code

The code run result is as follows:

conclusion

Preview: In the next article we’ll look at images in HTML and background images in CSS