关于 :visited on class 的问题。为什么 a:visited 工作正常，而 .myarticle:visited 不行？

Question

<!-- Style of myarticle-->
.myarticle{
    width: 300px;
    padding: 10px;
    margin: 2px 5px 0px 0px;
    border: 1px solid black;
    background-color: bisque;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: graY;
}

a:link{
    color: silver;
}
 <!--The thing, I don't understand. .myarticle:visited does nothing, ??-->
a:visited, .myarticle:visited{
    background-color: white;
    border-radius: 20px;
    color: black;
}
.myarticle:hover{
    width: 300px;
    padding: 10px;
    margin: 2px 5px 0px 0px;
    border: 1px solid #67B9B3;
    background-color: #224341;
}

a{
    text-decoration: none;
}

  
.myarticle:active{
    width: 300px;
    padding: 10px;
    margin: 2px 5px 0px 0px;
    border: 1px solid #67B9B3;
    background-color: #224341;
}
 <!-- main -->
.mymain{
    width: 70%;
    padding: 5px;
    height: 350px;
    background-color: sienna;
    border: 2px solid peru;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
 <!-- Footer -->
.headfoot{
    width: 70%;
    padding: 5px;
    border: 2px solid peru;
    background-color: sandybrown;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
       
        <meta charset="utf-8">
        <link rel="stylesheet" href="Green.css">
        <title>Cyan</title>
    </head>
    <body>    
        <header class="headfoot">Kopfzeile</header>
            <main class="mymain">
                   <!--Hyperlink reference (a)-->
                    <a href="index.html">
                     <!-- first article -->
                    <article class="myarticle article01">
                            <h1>Artikel (1)</h1>
                            <p>Lorem ipsum dolor...</p>
                    <a href="index.html">
                    <!-- second article -->
                    <article class="myarticle article02 unten">
                        <h1>Artikel (2)</h1>
                        <p>Lorem ipsum dolor...</p>
                    </article></a>
                    <a href="https://www.youtube.com/watch?v=IumYMCllMs" >
                      <!-- third article -->
                    <article class="myarticle article03">
                        <h1>Artikel (3)</h1>
                        <p>Lorem ipsum dolor...</p>
                    </article><a/>
            </main>
        <footer class="headfoot">
        Fußzeile
        </footer>
    </body>
</html>

我不知道，为什么它不起作用。有人可以向我解释我的错在哪里吗？为什么 .myarticle:visited 不能正常工作？:(

[如果访问了 a 的 link，我正在尝试更改 myarticle 的样式。但实际上我有点沮丧。我不知道我的错在哪里。 ':visited' 的规则是什么？它是由错误使用引起的吗？那怎么写呢？]

Answer 1

因为 .myarticle 不能是 "visited"，我会选择：

a:visited, a:visited > .myarticle{
    background-color: red;
    border-radius: 20px;
    color: black;
}

而不是：

<!--The thing, I don't understand. .myarticle:visited does nothing, ??-->
a:visited, .myarticle:visited{
    background-color: white;
    border-radius: 20px;
    color: black;
}

:visited 状态适用于链接，您不能将其应用于 article 项

关于 :visited on class 的问题。为什么 a:visited 工作正常，而 .myarticle:visited 不行？

Problem with :visited on class. Why does a:visited work fine, and .myarticle:visited not?

html

css

visited