现在正在学习jquery的选择器的使用，与css中的大部分选择器有相同之处，这里对css的选择器做一个总结便于以后对比学习。
第一、元素选择器：
通配选择器：*{} 一般用于全局的消除浏览器自带效果
类型选择器：E{} html的标签，一般用于消除一些特定的浏览器自带效果
id选择器：#myid{} 一般用于指定特定的效果，或者用于命名特别的区域。学会利用id只能有一个的特性
类选择器：.myclass{} 主要用于设置特效，并使用class可以使用多个的特性对网页进行布局设计
第二、关系选择器：
包含选择器：E F(注意这里的符号是空格，关系选择器) 在设置网页效果时长期使用，目前本人理解的是用于准确定位
注意：包含选择器在某些地方也叫子类选择器，并且这里的子类无论嵌套多深都会实现，如下图
子选择器：E>F 一般用于特定指定某个元素的子元素
注意：这里只能是父元素的下一级子元素，不能是子元素的子元素。请与上面的子类选择器区分。
相邻选择器：E+F 如果想要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
兄弟选择器：E~F 选择E元素后面的所有兄弟元素F。
注意：这里会选择除了E后面的所有相同元素，开发中不常用。
第三、属性选择器：(使用频率比较少)
属性选择器的分类：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
具体作用：
E[att]：选择具有att属性的E元素
E[att="val"]:选择具有att属性且属性值等于val的E元素
E[att~="val"]:选择具有att属性且属性值为医用空格分给的字词列表，其中一个等于val的E元素。
E[att^="val"]:选择具有att属性且属性值以val开头的字符串的E元素。
E[att$="val"]:选择具有att属性且属性值以val结尾的字符串的E元素
E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔符的字符串的E元素。
总结：空格用~,开头结尾分别为^、$,包含用*,特殊的-格式用特殊的|
第四、伪类选择器：(重点，用于一些特殊的布局效果)
关于超链接a的伪类选择器
E：link 被访问前的样式
E:visited 被访问后的样式
E:hover 鼠标放到超链接上时的效果(时常使用)
E:active 在鼠标点击与释放之间发生的事件
E:focus 当获取到焦点的时候放生，该对象的onfocus事件发生
其他伪类选择器：
E:lang() 匹配使用的特殊语言
E:not() 匹配不含有s选择器的元素E,用于取消某个特定的选择器
E:root 匹配E元素在文档中的根元素。在html中，根元素永远是html。
一些重要的伪类选择器：
E:first-child 匹配父元素的第一个子元素E 注意：用于有大量内容的时候，设置某些特殊的效果
E:last-child 匹配父元素的最后一个子元素
E:only-child 匹配父元素仅有的一个子元素E 注意：要使该属性生效，子元素只能有一个。（这里记着jquery中也有使用）
E:nth-child(n) 匹配父元素的第n个子元素 注意：这里可以通过语法设定按照偶数或者奇数（基础）
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n) 匹配同类型中的 第n个同级兄弟元素E
E:nth-last-of-type 匹配同类型中的倒数第n个同级兄弟元素E
E:empty 匹配没有任何子元素的元素E 注意：不仅没有子元素，而且里面没有显示任何东西才能生效
E:checked 匹配用户界面上处于选中状态的元素E。（用于input type为radio与checkbox时）
E:enabled 匹配用户界面上处于可用状态的元素E。就是 字面意思
E:disabled 匹配用户界面上处于禁用状态的元素E。就是 字面意思
E:target 匹配相关url指定的E元素，下面是代码，请自主实验
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>目标伪类选择符 E:target_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
.test .hd{padding:10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}
.test .bd h2{border-bottom:1px solid #ddd;}
.test .bd .panel:target{border-color:#f60;}
.test .bd .panel:target h2{border-color:#f60;}
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<p class="test">
<p class="hd">
<a href="#panel1">前往区块1</a>
<a href="#panel2">前往区块2</a>
<a href="#panel3">前往区块3</a>
<a href="#panel4">前往区块4</a>
<a href="#panel5">前往区块5</a>
</p>
<p class="bd">
<p id="panel1" class="panel">
<h2>区块1</h2>
<p><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></p>
</p>
<p id="panel2" class="panel">
<h2>区块2</h2>
<p><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></p>
</p>
<p id="panel3" class="panel">
<h2>区块3</h2>
<p><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></p>
</p>
<p id="panel4" class="panel">
<h2>区块4</h2>
<p><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></p>
</p>
<p id="panel5" class="panel">
<h2>区块5</h2>
<p><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></p>
</p>
</p>
</p>
</body>
</html>第五、伪对象选择器：
常用：
E:before/E::before 双冒号为现在推荐写法，单独的冒号任然适用
E:after/E::after
E::selection 设置对象被选择时的样式 （一般用来弄些装b的特效文字展示，认真脸。注意两个冒号）
E:first-line/E::first-line 设置对象内的第一行样式(懒得写了，反正用的不多。可以查看帮助文档)
E:first-letter/E::firset-letter 设置对象内的第一个字符的样式（这个写文章用得多，很显然现在市场上用得少）
相关推荐：
Atas ialah kandungan terperinci css选择器实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Gaya CSS peringkat seterusnya untuk kursorApr 23, 2025 am 11:04 AMKursor adat dengan CSS adalah hebat, tetapi kita boleh mengambil sesuatu ke peringkat seterusnya dengan JavaScript. Menggunakan JavaScript, kita boleh beralih antara negeri kursor, letakkan teks dinamik dalam kursor, gunakan animasi kompleks, dan gunakan penapis.
Dunia bertembung: Pengesanan Perlanggaran Kerangka Key menggunakan pertanyaan gayaApr 23, 2025 am 10:42 AMAnimasi CSS interaktif dengan unsur -unsur yang menghilangkan satu sama lain kelihatan lebih masuk akal pada tahun 2025. Walaupun tidak perlu untuk melaksanakan pong dalam CSS, peningkatan fleksibiliti dan kuasa CSS mengukuhkan kecurigaan Lee '
Menggunakan penapis latar belakang CSS untuk kesan UIApr 23, 2025 am 10:20 AMPetua dan cara untuk menggunakan harta penapis latar belakang CSS ke antara muka pengguna gaya. Anda akan belajar bagaimana untuk meletakkan penapis latar belakang di antara pelbagai elemen, dan mengintegrasikannya dengan kesan grafik CSS yang lain untuk membuat reka bentuk yang rumit.
SMIL ON?Apr 23, 2025 am 09:57 AMNah, ternyata ciri-ciri animasi terbina dalam SVG ' s tidak pernah ditamatkan seperti yang dirancang. Pasti, CSS dan JavaScript lebih mampu membawa beban, tetapi ia baik untuk mengetahui bahawa SMIL tidak mati di dalam air seperti sebelumnya
'Cantik' berada di mata penontonApr 23, 2025 am 09:40 AMYay, let ' s melompat untuk teks-wrap: Pretty Landing dalam Pratonton Teknologi Safari! Tetapi berhati -hatilah bahawa ia ' s berbeza dari bagaimana ia berfungsi dalam pelayar kromium.
CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AMKemas kini trik CSS ini menyoroti kemajuan yang ketara dalam almanak, penampilan podcast baru-baru ini, panduan kaunter CSS baru, dan penambahan beberapa penulis baru yang menyumbang kandungan berharga.
Ciri tailwind ' s @ply lebih baik daripada bunyiApr 23, 2025 am 09:23 AMKebanyakan masa, orang mempamerkan ciri-ciri Tailwind ' Apabila dipamerkan dengan cara ini, @apply tidak menjanjikan sama sekali. Jadi obvio
Rasa seperti saya tidak mempunyai pelepasan: perjalanan ke arah penyebaran yang warasApr 23, 2025 am 09:19 AMMenggunakan seperti idiot datang ke ketidakcocokan antara alat yang anda gunakan untuk menggunakan dan ganjaran dalam kerumitan dikurangkan berbanding kerumitan yang ditambah.
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!
Artikel Panas
Alat panas
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
