kelas pseudo CSS

Kelas pseudo CSS -- Kelas Pseudo

Kelas pseudo CSS ialah sebahagian daripada pemilih CSS

Nama kelas pseudo sensitif huruf besar dan kecil Kepekaan bergantung pada bahasa daripada dokumen. Dalam HTML Dokumen ini tidak sensitif huruf besar-besaran, tetapi dokumen XML sensitif huruf besar-kecil

kelas pseudo dalam bahasa Inggeris ialah Kelas Pseudo

Kaitan antara gaya dalam CSS. dan elemen dalam dokumen HTML biasanya berdasarkan elemen dalam lokasi dokumen, pendekatan ini memenuhi kebanyakan keperluan. Walau bagaimanapun, disebabkan oleh pengehadan struktur dokumen HTML, beberapa kesan tidak dapat dicapai, seperti peristiwa yang dicetuskan oleh tindakan pengguna tertentu Berikut ialah beberapa contoh:

Apabila pengguna menggerakkan tetikus ke atas elemen HTML<🎜. >

Meninggalkan elemen HTML

Mengklik pada elemen HTML

pseudo-class boleh digunakan untuk perubahan dalam status dokumen, peristiwa dinamik, dsb., seperti klik tetikus pengguna pada elemen dan pautan yang tidak dilawati

Kelas pseudo mengelaskan elemen melalui tiga cirinya: nama, atribut atau kandungan. Pada dasarnya, ia adalah ciri yang tidak boleh diperolehi dalam dokumen HTML

CSS :link pseudo-class

:link -- CSS :link pseudo-class, sesuai untuk pautan yang belum dilawati oleh pengguna

Sintaks: :link

Versi CSS: CSS1

Penerangan:

sesuai untuk pautan yang belum dilawati oleh pengguna

Terminal pengguna (seperti penyemak imbas) biasanya memaparkan pautan yang belum dilawati dan pautan yang dilawati secara berbeza CSS menyediakan pseudo-classes :link dan :visited untuk membezakan pautan dalam dua negeri

Pautan yang tidak dilawati dan pautan yang dilawati adalah saling eksklusif

pautan, yang bermaksud "pautan" dalam bahasa Cina

Tetapkan warna pautan yang ditentukan:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
<p><a class="dreamdu" href="//m.sbmmt.com">点击跳转</a></p>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
</body>
</html>

CSS: dilawati kelas pseudo

Sintaks: :dilawati

Versi CSS: CSS1

URL Rujukan: http://www.dreamdu.com/ css/pseudo -class_visited/

Penjelasan:

Terpakai pada pautan yang telah dilawati oleh pengguna

Terminal pengguna (contohnya: penyemak imbas) biasanya memaparkan pautan yang tidak dilawati dan pautan yang dilawati berbeza Untuk pautan, CSS menyediakan kelas pseudo :link dan :visited untuk membezakan antara dua pautan status

Pautan yang tidak dilawati dan pautan yang dilawati adalah saling eksklusif

dilawati, Maksud "dilawati" Cina

Tatabahasa

:dilawati

a:dilawati

a.kelas:dilawati

Contoh

a:dilawati

{

warna: hijau;

}

Gaya pautan yang dilawati yang ditakrifkan di atas ialah hijau

Bahasa dokumen menentukan elemen yang manakah merupakan rantaian sumber hiperpautan. Contohnya, dalam HTML, kelas pseudo pautan digunakan pada elemen dengan atribut href. Oleh itu, dua pengisytiharan CSS berikut adalah bersamaan

a:dilawati

{

warna: hijau;

}

:dilawati

{

warna: hijau;

}

Petua: Untuk pautan yang telah dilawati, penyemak imbas akan merekod Maklumat lawatan, sila kosongkan data cache penyemak imbas sebelum melihat contoh di bawah

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
</body>
</html>

CSS :hover pseudo class

sesuai untuk apabila kursor (penunjuk tetikus) menghala ke elemen, tetapi elemen ini bukan Gaya apabila diaktifkan

Sintaks: :hover

Versi CSS: CSS2

Penerangan :

Digunakan apabila kursor (penunjuk tetikus) menghala ke elemen, tetapi elemen ini tidak diaktifkan

Pelanggan (penyemak imbas) boleh menukar kesan pemaparannya mengikut interaksi pengguna dengannya CSS menyediakan tiga kelas pseudo untuk situasi ini: tuding, aktif, fokus

Tiga kelas pseudo di atas bukan. Saling eksklusif, satu elemen boleh digunakan pada beberapa daripadanya pada masa yang sama

:legar pseudo-class, yang boleh digunakan apabila pengguna menghala ke elemen, seperti tetikus pengguna menghala ke perenggan p. Apabila pengguna meninggalkan elemen dengan tetikus, paparan gaya asal elemen dipulihkan

tuding, yang bermaksud "tinggal, tuding" dalam bahasa Cina

Sintaks

: hover

a:hover

a.class:hover

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 伪类示例</title>
<style type="text/css" media="all">
a:hover 
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="//m.sbmmt.com">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>

anchor pseudo-class

dalam penyemak imbas yang menyokong CSS Dalam penyemak imbas, keadaan pautan yang berbeza boleh dipaparkan dalam cara yang berbeza

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS :anchor 伪类示例</title> 
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

Nota: Dalam definisi CSS, a:hover mesti diletakkan selepas a:link dan a:visited to menjadi berkesan.

Nota: Dalam definisi CSS, a:active mesti diletakkan selepas a:hover untuk menjadi sah.

Nota: Nama kelas pseudo tidak sensitif huruf besar-besaran.

CSS :kelas pseudo anak pertama

Sintaks: :anak pertama

Versi CSS: CSS2

URL Rujukan: http://www.dreamdu.com/css/pseudo-class_first-child/

Penerangan:

sepadan dengan elemen anak pertama unsur lain, contohnya: dalam div Termasuk berbilang elemen p, untuk memadankan elemen p pertama, anda boleh menggunakan: kelas pseudo anak pertama

pertama, yang bermaksud "pertama" dalam bahasa Cina, yang bermaksud "keturunan, nod anak" dalam bahasa Cina

Sintaksis

:anak pertama

E:anak pertama

E1>E2: anak pertama

Contoh

p > kod:anak pertama

{

warna:limau;

latar belakang:merah;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-child
{
color:blue;
} 
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>

CSS :lang pseudo-class

: Kelas pseudo lang memberi anda keupayaan untuk menentukan peraturan khas untuk bahasa yang berbeza

Nota: IE8 mesti mengisytiharkan <!DOCTYPE> untuk menyokong ;lang pseudo-class.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS :hover 伪类示例</title> <style type="text/css" media="all"> a:hover { color:yellow; background:blue; font-size:small; } p:hover { color:yellow; background:blue; font-size:large; } div:hover { color:red; background:lime; font-size:small; } </style> </head> <body> <a href="//m.sbmmt.com">点击跳转</a> <p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p> <div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

kelas pseudo CSS

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]