css伪类是什么？css伪类的简单介绍（附示例）
一个CSS伪类可以让你到一个特定的状态分配给一个元素。例如，用户将鼠标悬停在网页上的图像上，并将其更改为另一个图像。链接在访问后会更改颜色，并且可以与未访问的链接区分开来。表单上的输入框被禁用，并且不带值。伪类可以实现这些操作和更多操作。普通的CSS类也可以与伪类一起使用。
CSS3添加了比以前CSS2中更多的伪类。（推荐课程：css3视频教程）
伪类被添加到选择器上，它前面有一个冒号，后跟一个带括号值的属性。伪类的语法如下
selector: pseudo-class { property:value;}基本伪类
有许多不同的伪类，下面的代码示例演示了一些最基本的伪类。这些被归类为动态伪类，由于用户的操作而改变。在代码示例中，：link 伪类用于将链接的颜色设置为蓝色。一旦用户访问了链接，则：visited 伪类用于将链接的颜色更改为maroon。还演示了：当用户将鼠标悬停在图像上时，悬停用于将带有白色文本的紫色圆圈更改为带有黄色文本的粉红色正方形。的：重点伪类更改日期输入字段为灰色，当用户点击或在其上“重点”。代码示例在这里 为自己尝试一下！
<!DOCTYPE html>
<html>
<head>
<style>
a:link{
color:blue;
}
a:visited{
color:maroon;
}
div {
background-color: purple;
color: white;
line-height:90px;
font-size:20px;
text-align:center;
width:200px;
height:200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
div:hover {
background-color:pink;
color:yellow;
width:200px;
height:200px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
input:focus {
background-color: lightgray;
}
</style>
</head>
<body>
<p><b><a href="https://www.php.cn/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="text" name="Date"><br>
</form>
</body>
</html>一些更多的伪类
下面列出了一些更常用的伪类。可在此处找到所有伪类的完整列表。
：first-child- 此类允许您将特定样式添加到作为其父元素的第一个子元素的元素。
：root- 此伪类用于匹配文档的根元素。
：lang- 不同的语言有不同的规则和惯例。有时您需要创建多种语言使用的页面。：lang伪类对于这种情况很有用。它主要查看lang =“”HTML属性和元素，并相应地匹配元素。
：disabled- 这允许您指示禁用的输入元素，如文本字段和按钮。
：fullscreen- 此伪类使用处于全屏模式的元素。
伪元素
伪元素具有与伪类类似的功能，因为它们可以由CSS设置样式并由用户代理添加。但是它们与伪类不同，因为它们允许您使用DOM中不存在的元素。伪元素的语法标识符通常是双冒号，而不是像伪类一样的单冒号。常见的伪元素是:: before ，:: after 和:: first-line 。重要的是要注意一些编码器使用单个冒号：对于伪元素，这是CSS2中的惯例。请记住这一点，以避免伪类和伪元素之间的混淆。
最后
伪类可以使得特殊状态应用于元素。它们允许开发人员创建很酷的效果，而无需使用JavaScript等脚本语言。有许多不同类型的伪类，使您可以在保持代码简单的同时使页面更具交互性和趣味性。
Atas ialah kandungan terperinci css伪类是什么？css伪类的简单介绍（附示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat 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
1381
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
