target attribute not working properly on css-CodePudding

I followed the instructions I found online when using the :target, but it's not working.

Expected output

When the first link is clicked, the background color and font color of #div1 will change

When the second link is clicked, the border of #div2 will change

Actual output

Nothing changes when I click either links

Where did I go wrong in here?

<!doctype html>
<html>
<head>

    <title>Title</title>
    <meta charset="UTC-8">
    <style>

        a.div1:target {
            background-color: blue;
            color: yellow;
        }
        
        a.div2:target {
            border: 10px dotted green;
        }
        
        div {
            width: 300px;
            border: 1px solid;
            padding: 50px;
            margin: 20px;
        }

    </style>

</head>
<body>
    
    <a href="#div1" >First Link</a>
    <a href="#div2" >Second Link</a>

    <div id="div1">

        Div 1

    </div>
    <div id="div2">

        Div 2

    </div>

</body>
</html>

CodePudding user response：

:target matches the element that is linked to, not the link itself.

div#div1:target {
    background-color: blue;
}