CSS :active选择器的实例代码详解
Jul 19, 2017 pm 05:07 PMActive的一段话
active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。
Active的特点
其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a{
display:block;
width:30px;
margin:20px;
border-radius:8px;
padding:20px 50px;
text-align:center;
background:green;
}
a:active{
background:indigo;
}
</style>
</head>
<body>
<a href="paris.jpg">link</a>
</body></html>
我们可以通过过渡属性（transition）来调整这个时间。
a:active{
background:indigo;
transition:3s;
}
读者可以做一个实验，改变其中transition的值，然后测试:avtive选择器所花费的时间。
ACTIVE示例
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
p {
width:100px;
height:100px;
background:red;
transition: 5s;
}
p:active {
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<p></p>
</body></html>这里面有两个transition，也就是意味着有两个过渡。
第一个过渡是激活active选择器，这时候 p:avtive 里的 transition 起作用。
第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 p 里的 transition 起作用。
如果读者只设置了在 p 里面的 transition ，那么选择器的过渡时间也就默认为 p 里的 transition 了。
Atas ialah kandungan terperinci CSS :active选择器的实例代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Kemas kini Amazfit baharu dilancarkan kepada GTR 4, GTS 4 dan jam tangan pintar lain
Aug 17, 2024 pm 09:33 PM
Kemas kini Amazfit baharu dilancarkan kepada GTR 4, GTS 4 dan jam tangan pintar lain
Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3
Nov 20, 2023 am 11:20 AM
Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3
css pembelajaran pseudo-selector analisis pseudo-class selector
Aug 03, 2022 am 11:26 AM
css pembelajaran pseudo-selector analisis pseudo-class selector
Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih
Sep 08, 2023 am 09:15 AM
Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih
Apa yang perlu dilakukan jika pemilih javascript gagal
Feb 10, 2023 am 10:15 AM
Apa yang perlu dilakukan jika pemilih javascript gagal
Adakah pemilih dalam css termasuk pemilih tag hiperteks?
Sep 01, 2022 pm 05:25 PM
Adakah pemilih dalam css termasuk pemilih tag hiperteks?
Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS
Sep 08, 2023 pm 08:22 PM
Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS
