Apakah kelas pseudo css3?-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Apakah kelas pseudo css3?

青灯夜游

Dec 09, 2021 am 10:48 AM

css3 Kelas pseudo

kelas pseudo css3 termasuk: ":first-of-type", ":last-of-type", ":only-of-type", ":only-child", ":last- anak" ”, “:root”, “:kosong”, “:sasaran”, “:bukan”, dsb.

Apakah kelas pseudo css3?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

css3 pseudo-class

选择器	示例	示例说明	CSS
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

Mari kita pelajari tentang beberapa kelas pseudo css3 melalui contoh.

:jenis pertama

Memilih semua elemen yang merupakan anak pertama daripada jenis tertentu ibu bapa mereka

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:first-of-type").css("background-color","pink");
});
</script>
</head>
<body>
 
<p>p</p>
 
<div>
	<p>p1</p>
	<p>p2</p>
</div><br>
 
<div>
	<span>span</span>
	<p>p1</p>
	<p>p2</p>
</div>
</body>
</html>

Salin selepas log masuk

: jenis terakhir

memilih jenis tertentu yang tergolong dalam elemen induknya Semua elemen elemen anak terakhir

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:last-of-type").css("background-color","pink");
});
</script>
</head>
<body>
 
<div>
	<p>p1</p>
	<p>p2</p>
</div><br>
 
<div>
        <p>p1</p>
	<p>p2</p>
        <span>span</span>
</div>
</body>
</html>

Salin selepas log masuk

: jenis sahaja

Memilih semua elemen yang merupakan satu-satunya elemen anak bagi jenis tertentu daripada induknya

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:only-of-type").css("background-color","pink");
});
</script>
</head>
<body>
 
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
 
<div style="border:1px solid;">
<p>p</p>
</div><br>
 
<div style="border:1px solid;">
<span>span</span>
<p>p</p>
</div><br>
 
</body>
</html>

Salin selepas log masuk

: anak tunggal

Pilih setiap elemen yang merupakan satu-satunya elemen anak daripada induknya

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:only-child").css("background-color","pink");
});
</script>
</head>
<body>
 
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
 
<div style="border:1px solid;">
<p>p</p>
</div><br>
 
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
 
</body>
</html>

Salin selepas log masuk

: ke- -child(n)

Memilih semua elemen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:nth-child(3)").css("background-color","pink");
});
</script>
</head>
<body>
 
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
 
<div style="border:1px solid;">
<span>div  span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
 
<div style="border:1px solid;">
	<p>div2 p1</p>
	<p>div2 p2</p>
	<p>div2 p3（div 的第三个子元素）</p>
</div>
 
<p>body p3</p>
 
</body>
</html>

Salin selepas log masuk

iaitu unsur anak ke-nth dari sebarang jenis yang merupakan elemen induknya

:nth-last-child(n)

Memilih semua elemen kepunyaan elemen anak ke-n bagi sebarang jenis elemen induknya, bermula dari A terakhir elemen kanak-kanak untuk mula mengira.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:nth-last-child(3)").css("background-color","pink");
});
</script>
</head>
<body>
 
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
 
<div style="border:1px solid;">
<span>div  span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
 
<div style="border:1px solid;">
	<p>div2 p1</p>
	<p>div2 p2</p>
	<p>div2 p3（div 的第三个子元素）</p>
</div>
 
<p>body p3</p>
 
</body>
</html>

Salin selepas log masuk

:nth-of-type(n)

Pilih semua elemen yang merupakan unsur anak ke-n bagi jenis tertentu unsur induknya

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:nth-of-type(3)").css("background-color","pink");
});
</script>
</head>
<body>
 
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
 
<div style="border:1px solid;">
<span>div  span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
 
<div style="border:1px solid;">
	<p>div2 p1</p>
	<p>div2 p2</p>
	<p>div2 p3（div 的第三个子元素）</p>
</div>
 
<p>body p3</p>
 
</body>
</html>

Salin selepas log masuk

: nth-last-of-type

Memilih semua elemen yang merupakan anak ke-nth dari jenis tertentu unsur induknya, bermula dari Elemen anak terakhir mula mengira

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:nth-last-of-type(3)").css("background-color","pink");
});
</script>
</head>
<body>
 
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
 
<div style="border:1px solid;">
<span>div  span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
 
<div style="border:1px solid;">
	<p>div2 p1</p>
	<p>div2 p2</p>
	<p>div2 p3（div 的第三个子元素）</p>
</div>
 
<p>body p3</p>
 
</body>
</html>

Salin selepas log masuk

(Belajar perkongsian video: tutorial video css)

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7692

Tutorial Java

1639

Tutorial CakePHP

1393

Tutorial Laravel

1287

Tutorial PHP

1229

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3 Apr 28, 2022 pm 04:32 PM

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Adakah kesan animasi css3 mempunyai ubah bentuk? Apr 28, 2022 pm 02:20 PM

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.

See all articles