Pemilih kelas pseudo tutorial asas CSS

Pemilih kelas pseudo CSS: Tambah gaya pada hiperpautan (tambah gaya pada keadaan pautan yang berbeza)

Hiperpautan mempunyai empat Status:

Status biasa (:link): Tetikus tidak diletakkan pada gaya pautan sebelumnya.

Keadaan tuding (: hover): Gaya apabila tetikus diletakkan pada pautan.

Keadaan aktif (:aktif): Tahan butang kiri tetikus tanpa melepaskannya Keadaan ini adalah jangka pendek.

Status dilawati (:dilawati): Tekan butang kiri tetikus dan timbulkannya, kesan gaya pada masa ini.

Dalam kerja harian, kaedah penulisan berikut digunakan untuk menambah gaya yang berbeza pada pautan:

a:pautan, a:dilawati{ warna:#444; ; } //Gabungkan "keadaan biasa" dan "keadaan yang dilawati" menjadi satu.

a:hover{ color:#990000; text-decoration:underline; } //"Tetikus di atas" untuk mencipta satu kesan

<!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>

Meneruskan pembelajaran

fail baharu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX