Rumah hujung hadapan web html tutorial CSS选择器总结 - Jesse131

CSS选择器总结 - Jesse131

May 22, 2016 pm 05:19 PM

选择器                优先级                 实例
ID选择器           100
类选择器            10
伪类选择器     10                    :link :visited :focus :hover :actived :lang
  UI元素状态伪类          E:enabled{}匹配所有用户界面(form表单)中处于可用状态的E元素
                  E:disabled{}匹配所有用户界面(form表单)中处于不可用状态的E元素
                  E:checked{}匹配所有用户界面(form表单)中处于选中状态的E元素
  结构性伪类             E:first-child{}匹配父元素中第一个E元素
                  E:last-child{}匹配父元素中最后一个E元素
                  E:nth-child(n){}匹配第n个子元素E
                  E:nth-last-child(n){}匹配倒数第n个结构子元素E
                  E:nth-of-type(n){}匹配同类型中的第n个同级兄弟元素E
                  E:nth-last-of-type(n){}匹配同类型中的倒数第n个同级兄弟元素E
                  E:first-of-type{}匹配同级兄弟元素中的第一个E元素
                  E:only-child{}匹配属于父元素中唯一子元素的E
                  E:only-of-type{}匹配属于同类型中唯一兄弟元素的E
                  E:root{} 不常用 匹配文档的根元素。在HTML中,根元素永远是HTML
                  E:empty{} 不常用 匹配没有任何子元素(包括text节点)的元素E
  否定伪类              p:not(s){}匹配所有不匹配简单选择符s的元素p
  目标伪类              不常用
属性选择器          10
  简单属性选择器           h1[foo]{color:red;}
  具体属性值选择器        h1[foo="sun"]{color:red;} 选择foo属性值是sun的所有h1元素
  子串匹配属性选择器       h1[foo*="sun"]{color:red;} 选择foo属性值中包含sun的所有h1元素
                  h1[foo^="sun"]{color:red;} 选择foo属性值以sun开头的所有h1元素
                  h1[foo$="sun"]{color:red;} 选择foo属性值以sun结尾的所有h1元素
元素选择器      1
  子元素选择器           h1 > span{color:red;}
  相邻兄弟元素选择器        h1 + h1{font-size:20px;}
伪元素选择器      1       p::first-letter{}设置段落p的首字母样式
                   p::first-line{} 设置段落p的首行样式
                   p::before{} p::after{}
                   p::selection{}设置被用户选取部分的样式

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)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
1 bulan 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)

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

See all articles