Rumah hujung hadapan web tutorial css CSS3中选择器有哪些语法

CSS3中选择器有哪些语法

Nov 30, 2017 pm 12:00 PM
css3 pemilih

今天给大家介绍一下在CSS3中的常用选择器语法,语法一般分为三种,基本选择器语法,层次选择器语法和动态伪类选择器语法。下面就给大家详细的解读一下。

 1,基本选择器语法

(1)*    通配选择器    选择文档中所以HTML元素

(2)E    元素选择器    选择指定类型的HTML元素

#id      ID选择器  选择指定ID属性值为“id”的任意类型元素

.class  类选择器  选择指定class属性值为“class”的任意类型的任意多个元素

selector1,selectorN   群组选择器    将每一个选择器匹配的元素集合并

2,层次选择器语法

(1)E F 后代选择器(包含选择器)      选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

(2)E>F      子选择器  选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素

(3)E+F      相邻兄弟选择器  选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面

(4)E~F      通用选择器    选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

3,动态伪类选择器语法

(1)E:link   链接伪类选择器  选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

(2)E:visited     链接伪类选择器  选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

(3)E:active      用户行为选择器  选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上

(4)E:hover      用户行为选择器  选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

(5)E:focus       用户行为选择器  选择匹配的E元素,而且匹配元素获取焦点


相信看了以上介绍你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

用H5制作烟花粒子特效的制作方法

让div宽度自适应教学

网页中使用h标签的开发经验

Atas ialah kandungan terperinci 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

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan sempadan renda dalam css3 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;".

Apakah pengecam pemilih id dalam css Apakah pengecam pemilih id dalam css Sep 22, 2022 pm 03:57 PM

Dalam CSS, pengecam pemilih id ialah "#". Anda boleh menentukan gaya khusus untuk elemen HTML yang ditandakan dengan nilai atribut id tertentu Struktur sintaks ialah "nilai #ID {attribute: attribute value;}". Atribut ID adalah unik dan tidak boleh diulang dalam keseluruhan halaman; nilai atribut ID tidak seharusnya bermula dengan nombor yang bermula dengan nombor tidak akan berfungsi dalam pelayar Mozilla/Firefox.

Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3 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. Contoh kod khusus adalah seperti berikut: Kod HTML: <divid="container" ><divclass="item"&gt ;Elemen anak pertama</div><divclass="item"&

Apa yang perlu dilakukan jika pemilih javascript gagal Apa yang perlu dilakukan jika pemilih javascript gagal Feb 10, 2023 am 10:15 AM

Pemilih JavaScript gagal kerana kod tidak diseragamkan Penyelesaiannya ialah: 1. Alih keluar kod JS yang diimport dan kaedah pemilih ID akan berkesan 2. Hanya perkenalkan kod JS yang ditentukan sebelum memperkenalkan "jquery.js".

Ketahui ciri CSS baharu: Limpahan keratan berarah:klip Ketahui ciri CSS baharu: Limpahan keratan berarah:klip Oct 11, 2022 pm 07:12 PM

Artikel ini akan memperkenalkan ciri baharu, bermula daripada Chrome 90, ciri baharu yang ditambahkan pada limpahan - limpahan: klip Gunakannya untuk mengawal arah limpahan dengan mudah.

Adakah pemilih dalam css termasuk pemilih tag hiperteks? Adakah pemilih dalam css termasuk pemilih tag hiperteks? Sep 01, 2022 pm 05:25 PM

Tidak termasuk. Pemilih CSS termasuk: 1. Pemilih teg, yang mencari elemen HTML tertentu melalui nama elemen halaman HTML 2. Pemilih kelas, yang mencari elemen HTML tertentu melalui nilai atribut kelas elemen HTML; yang Cari elemen HTML tertentu melalui nilai atribut id elemen HTML 4. Pemilih kad bebas "*" boleh merujuk kepada semua jenis elemen teg, termasuk elemen tersuai 5. Pemilih atribut menggunakan nama atribut sedia ada; Elemen HTML atau nilai atribut untuk mencari elemen HTML tertentu.

Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS 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 Pengenalan: Dalam proses pengaturcaraan CSS, pemilih adalah elemen penting. Mereka membenarkan kami memilih dan menggayakan elemen dalam dokumen HTML berdasarkan kriteria tertentu. Dalam artikel ini, kami akan menyelami dua pemilih yang biasa digunakan iaitu: pemilih dan pemilih tempat. Dengan memahami prinsip kerja dan senario penggunaan mereka, kami boleh meningkatkan tahap pengaturcaraan CSS dengan banyak. 1. ialah pemilih ialah pemilih ialah pilihan yang sangat berkuasa

Penjelasan terperinci tentang penggunaan SVG untuk menambah logo pada favicon Penjelasan terperinci tentang penggunaan SVG untuk menambah logo pada favicon Sep 07, 2022 am 10:30 AM

Bagaimana untuk menambah logo ke favicon menggunakan SVG? Artikel berikut akan memperkenalkan kepada anda cara menggunakan SVG untuk menjana favicon dengan logo. Saya harap ia akan membantu anda!

See all articles