Блог

Главная - Вопросы по программированию - Проблема с :visited в классе. Почему a:visited работает нормально, а .myarticle:visited — нет?

Проблема с :visited в классе. Почему a:visited работает нормально, а .myarticle:visited — нет?

#html #css #visited

#HTML #css #посещенный

Вопрос:

 <!-- 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 не работает нормально?:(

[Я пытаюсь изменить стиль myarticle, если посещается ссылка a. Но на самом деле я немного разочарован. Я не знаю, в чем моя ошибка. каковы правила для ‘:visited’, вызвано ли это неправильным использованием? Как мне тогда это написать?]

Комментарии:

1. Вам нужно поделиться своим кодом, если вам нужна помощь

2. Не включайте ссылки на код … включите фактический код в сам вопрос. В какой-то момент ссылка станет недействительной, тогда этот вопрос никому не поможет.

Ответ №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 элементам