Gunakan kelas pseudo CSS-tutorial css-php.cn

Gunakan kelas pseudo CSS

王林

Lepaskan： 2023-09-03 18:41:01

ke hadapan

1291 orang telah melayarinya

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*/;
}

Salin selepas log masuk

Ini semua kelas pseudo CSS yang tersedia-

11 34< td style="text-align: center;">anak 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)

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

	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

	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
	23< /p>pilihan Ia memilih elemen di atas tanpa atribut "diperlukan"

	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>

Salin selepas log masuk

输出

这将产生以下输出 -

使用 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>

Salin selepas log masuk