-5 

<!-- 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 的链接，我正在尝试更改 myarticle 的样式。但实际上我有点沮丧。我不知道我的错在哪里。':visited' 的规则是什么，它是由错误的用法引起的吗？那我怎么写呢？】

4

1 回答 1

1

由于.myarticle无法“访问”，我会选择：

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项目

于 2019-03-12T18:32:21.807 回答