Why CSS target tag is not working with html id-CodePudding

everyone.
I'm studying html/css basic.
but I met some problem for css target tag

When I tried 'target' to some 'id(intro)', it is not work. ex)

<style>
    #intro:target{
        border: 5px #000 solid;
        margin: 5px;
    }
</style>

<ul id="intro">
    <li><a href="#lit">menu test</a></li>
</ul>
<p id="lit"> affected</p>

However, when I tried this without 'id(intro)' like below, it worked well.

 <style>
    :target{
        border: 5px #000 solid;
        margin: 5px;
    }
</style>

What is the problem?

CodePudding user response：

use selector target #lit, intro is not target, target will read url. not the other way around

<style>
    #lit:target{
        border: 5px #000 solid;
        margin: 5px;
    }
</style>

<ul id="intro">
    <li><a href="#lit">menu test</a></li>
</ul>
<p id="lit"> affected</p>