Sélecteur de pseudo-classe du didacticiel de base CSS

Sélecteur de pseudo-classe CSS : Ajouter des styles aux hyperliens (ajouter des styles aux différents états du lien)

Un hyperlien a quatre statuts :

Statut normal (:link) : La souris ne se place pas sur le style de lien précédent.

État de survol (:hover) : Le style lorsque la souris est placée sur le lien.

État actif (:active) : Maintenez enfoncé le bouton gauche de la souris sans le relâcher. Cet état est particulièrement éphémère.

Statut visité (:visited) : appuyez sur le bouton gauche de la souris et faites-le apparaître, l'effet de style à ce moment-là.

Dans le travail quotidien, les méthodes d'écriture suivantes sont utilisées pour ajouter différents styles aux liens :

a:link, a:visited{ color:#444; ; } //Combinez « état normal » et « état visité » en un seul.

a:hover{ color:#990000; text-decoration:underline; } //"Passez la souris" pour créer un seul effet

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    </head>
    <style type="text/css">
        .box {
            
            height:30px;
            border:1px solid red;
            padding:10px;
        }
        .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/
        .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
       
    </style>
    <body>
        <div class="box">
            <a href="#">欢迎来到php.cn</a>|
            <a href="#">首页</a>|
            <a href="#">课程</a>|
            <a href="#">问答</a>|
            <a href="#">手记</a>
        </div>
    </body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <style type="text/css"> .box { height:30px; border:1px solid red; padding:10px; } .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/ .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/ </style> <body> <div class="box"> <a href="#">欢迎来到php.cn</a>| <a href="#">首页</a>| <a href="#">课程</a>| <a href="#">问答</a>| <a href="#">手记</a> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Sélecteur de pseudo-classe du didacticiel de base CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]