什么是css选择器？css基本选择器的总结（九种）
什么是css选择器？css选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意味：选择哪个容器。HTML页面中的元素就是通过CSS选择器进行控制的。那么，css选择器有哪些呢？下面我们来看一看css常用的选择器
1 : css通配符选择器
通配符选择器用星号(*)来表示,例如:
*{
font-size : 12px;
}表示所有的元素的字体大小都是12px；
2 : css分组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。例如：
p, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}使用分组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并分组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
3 : css标签选择器
一个完整的HTML页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签采用相应的CSS样式,例如:
p{
color: red;
}这段代码会让所有的p标签都变成红色
4 : css类选择器
类选择器以class属性中有指定类名的任何元素为目标,类选择器以一个"."符号开头例如:
.info {
color:black;
}这样会让所有类名为info的类的元素颜色都变为黑色
5 :css ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式;ID选择符以一个“#”符号开头。例如:
#demop{
color:#000;
}这里代表id为demop的元素的设置它的字体颜色为黑色。
6 : css伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。例如:
a:link{
color:green ;
font-size: 50px
}
a:hover{
color:pink;
font-size: 50px
}
a:active{
color:yellow;
font-size: 50px
}
a:visited{
color:red;
font-size: 50px
}效果:
打开网页时标签为绿色
将鼠标放在标签上时标签为粉色
点击标签是标签为黄色
点击后标签为红色.
7 : css后代选择器
后代选择器用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。例如:
#people em{
color: red;
}这一规则把ID值为“people”的元素中包含任何em元素的颜色设置为红色。
8 : css组合选择器
可以把两种或者多种类型的选择符组合式使用;例如:
p.info {
color:blue;
}它只选择属于info类的段落，属于该类的别种元素和不属于info类的其他段落将被忽略。
9 : css属性选择器
格式：基本选择器[属性 = ‘属性值’]{ },也可以只写属性,例如:
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type = 'text'] {background-color: red}
input[type = 'password'] {background-color: pink}
</style>
</head>
<body>
<form>
name:<input type = "text"><br/>
pass:<input type = "password">
</form>
</body>
</html>运行结果： 
css选择器优先级大小:
!important > 行间样式>ID选择器 > 类|属性 选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
当有一些复杂选择器不能通过优先级的大小比出,那么我们就要用到权重进行计算
css选择器权重计算:
| !important |
无穷大 |
| 行间样式 | 1000 |
| ID选择器 | 100 |
| 类|属性|伪类 选择器 |
10 |
|
标签选择器 通配符选择器 |
1 0 |
将每一行上的所有选择器转化为这些数值进行相加得的结果越大则优先级越高!
相关文章推荐：
相关课程推荐：
Atas ialah kandungan terperinci 什么是css选择器？css基本选择器的总结（九种）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak
Artikel Panas
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)
Bagaimana untuk mengubah saiz kotak teks HTML
Feb 20, 2024 am 10:03 AM
Menetapkan saiz kotak teks HTML adalah operasi yang sangat biasa dalam pembangunan bahagian hadapan. Artikel ini menerangkan cara menetapkan saiz kotak teks dan menyediakan contoh kod tertentu. Dalam HTML, anda boleh menggunakan CSS untuk menetapkan saiz kotak teks. Kod khusus adalah seperti berikut: input[type="text"
Apa sebenarnya maksud pengeluaran halaman H5?
Apr 06, 2025 am 07:18 AM
Pengeluaran halaman H5 merujuk kepada penciptaan laman web yang serasi dengan platform menggunakan teknologi seperti HTML5, CSS3 dan JavaScript. Intinya terletak pada kod parsing penyemak imbas, struktur rendering, gaya dan fungsi interaktif. Teknologi umum termasuk kesan animasi, reka bentuk responsif, dan interaksi data. Untuk mengelakkan kesilapan, pemaju harus disahpepijat; Pengoptimuman prestasi dan amalan terbaik termasuk pengoptimuman format imej, pengurangan permintaan dan spesifikasi kod, dan lain -lain untuk meningkatkan kelajuan pemuatan dan kualiti kod.
Bagaimana untuk melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar
Mar 05, 2024 pm 02:03 PM
Cara melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar memerlukan contoh kod khusus Sebagai sistem CMS yang berkuasa, WordPress disukai oleh banyak pembangun laman web dan juruweb. Walau bagaimanapun, apabila menggunakan WordPress untuk mencipta laman web, anda sering menghadapi masalah salah jajaran tema, yang menjejaskan pengalaman pengguna dan keindahan halaman. Oleh itu, adalah sangat penting untuk melaraskan tema WordPress anda dengan betul untuk mengelakkan paparan tidak sejajar. Artikel ini akan memperkenalkan cara melaraskan tema melalui contoh kod tertentu.
Proses pengeluaran halaman H5
Apr 06, 2025 am 09:03 AM
H5 Page Proses Proses: Reka Bentuk: Rancangan Layout Halaman, Gaya dan Kandungan; Pembinaan Struktur HTML: Gunakan tag HTML untuk membina rangka kerja halaman; Penulisan Gaya CSS: Gunakan CSS untuk mengawal penampilan dan susun atur halaman; Pelaksanaan interaksi JavaScript: Tulis kod untuk mencapai animasi dan interaksi halaman; Pengoptimuman Prestasi: Memampatkan gambar, kod dan mengurangkan permintaan HTTP untuk meningkatkan kelajuan pemuatan halaman.
Mengapa elemen Div tertentu dalam penyemak imbas tepi tidak dipaparkan? Bagaimana menyelesaikan masalah ini?
Apr 05, 2025 pm 08:21 PM
Bagaimana menyelesaikan masalah paparan yang disebabkan oleh helaian gaya ejen pengguna? Apabila menggunakan penyemak imbas Edge, elemen Div dalam projek tidak dapat dipaparkan. Setelah memeriksa, saya menyiarkan ...
Dalam aplikasi Angular: Bagaimana Mengubah Warna Ikon Dengan Melayang Lebih?
Apr 05, 2025 pm 02:15 PM
Dalam aplikasi Angular, bagaimana menukar warna ikon apabila tetikus melayang di atasnya? Ramai pemaju akan memenuhi keperluan semasa membina aplikasi menggunakan sudut ...
Elemen laman web dinamik XPath dan nama kelas sering berubah. Bagaimana untuk merangkak sasaran tag?
Apr 01, 2025 pm 04:12 PM
Elemen Web Dinamik Masalah merangkak: Berurusan dengan perubahan nama XPath dan kelas, banyak pemaju crawler akan menghadapi masalah yang sukar apabila merangkak laman web dinamik: matlamat ...
Cara Debug Bootstrap
Apr 07, 2025 am 10:00 AM
Debugging Bootstrap melibatkan pemahaman CSS dan JS kerja dan menguasai petua berikut: Gunakan alat pemaju untuk memeriksa konflik gaya, menyesuaikan keutamaan, atau menggunakan pemilih CSS yang lebih spesifik. Tetapkan titik putus dan gunakan panel sumber untuk mengesan masalah dengan komponen JS. Baca dokumentasi bootstrap dengan teliti untuk memahami cara menggunakannya dengan betul. Pastikan keserasian penyemak imbas menggunakan alat seperti AutoPrefixer. Tulis kod bersih, gunakan nama kelas yang bermakna dan tambahkan komen untuk meningkatkan kecekapan debug.
