Rumah >hujung hadapan web >tutorial css >Gunakan kelas pseudo CSS

Gunakan kelas pseudo CSS

王林ke hadapan: 2023-09-03 18:41:011259semak imbas

Kami boleh menambah gaya khusus pada elemen sedia ada dalam HTML menggunakan kelas pseudo CSS, kelas pseudo ini memilih elemen dengan keadaan tertentu seperti (legar, diakses, dilumpuhkan, dll.)

NOTA strong> - Untuk menggabungkan pseudo CSS -kelas dengan unsur Pseudo dipisahkan Dalam CSS3, kelas pseudo menggunakan tatatanda titik bertindih tunggal.

Syntax

Berikut ialah sintaks untuk menggunakan kelas pseudo CSS pada elemen-

Selector:pseudo-class {
   css-property: /*value*/;
}

Ini semua kelas pseudo CSS yang tersedia-

11 34anak pertama810Dalam julatanak terakhir jenis terakhir20 21di luar julat Ia memilih elemen yang disebut dengan nilai di luar julat yang ditentukan baca sahaja baca-tulis Ia memilih elemen yang disebut tanpa atribut "baca sahaja" disebut semula elemen yang mempunyai atribut "memerlukan" ditentukan . klik pada URL yang mengandungi sauh itu nama)

tr>

Sr.No dan huraian pseudo
	Kurang Upaya Ia memilih setiap elemen yang disebut kurang upaya
	kosong Ia memilih setiap elemen yang disebut yang tidak mempunyai anak
td>
	Ia memilih setiap elemen yang disebut itu didayakan 6
	Ia memilih setiap elemen yang disebut yang merupakan anak pertama ibu bapanya
	Ia memilih setiap elemen yang disebut pertama daripada elemen induknya
	Fokus Ia memilih elemen yang disebutkan di atas yang mempunyai Elemen fokus

td>	Memilih sebutan pada tetikus
	Ia memilih sebutan nilai dalam julat yang ditentukan Elemen

Ia memilih semua elemen yang dinyatakan dengan nilai tidak sah	12 lang (bahasa)
Ia memilih setiap sebutan kepada elemen yang nilai atribut langnya bermula dengan "bahasa"
	ia memilih sebagai anak terakhir ibu bapanya 14
	Ia memilih setiap elemen yang terakhir disebut oleh induknya
	Ia memilih semua elemen yang disebut yang tidak dilawati
16	bukan(pemilih) Ia memilih semua elemen yang tidak disebut
	n ) Ia memilih anak ke-n sebagai ibu bapanya Ia memilih setiap elemen yang disebut sebagai anak ke-n ibu bapanya, bermula dari yang terakhir Kanak-kanak itu mula mengira
19	terakhir -oftype(n) Ia memilih setiap elemen yang disebut iaitu elemen ke-n yang disebut dalam induknya, bermula dari anak terakhir Elemen mula mengira
	ke-jenis(n) memilih setiap elemen yang disebut jadilah elemen yang ke-n disebut dalam induknya
	sahaja-jenis Ia memilih setiap elemen yang disebut sebagai satu-satunya sebutan unsur induknya
	ly -child Ia memilih sebagai satu-satunya elemen anak Setiap elemen yang disebutkan mempunyai induknya
	23pilihan Ia memilih elemen di atas tanpa atribut "diperlukan"
td>
	25
pilih atribut yang dinyatakan	yang dinyatakan 26
	27
30	有效它选择具有有效值的所有提到的元素
31	访问过它选择所有访问过的提到的元素

示例

让我们看一个 CSS 伪类的示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

输出

这将产生以下输出 -

使用 CSS 伪类

示例

让我们看一下 CSS 伪类的另一个示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

输出

这将产生以下输出 -

当未将鼠标悬停在 div 元素上时 -

Gunakan kelas pseudo CSS

当鼠标悬停在 div 元素上时 -

Gunakan kelas pseudo CSS

Atas ialah kandungan terperinci Gunakan kelas pseudo CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Tambah bayang pada imej menggunakan CSS3Artikel seterusnya：Tambah bayang pada imej menggunakan CSS3

Artikel berkaitan

Lihat lagi