CSS特殊性、继承与层叠
一、特殊性规则
选择器的特殊性由选择器本身的组件确定；特殊性由四个部分组成，其初始值为0，0，0，0。
1. 对于选择器中的每一个id，加0，1，0，0；
2. 对于选择器中的每一个类、伪类、属性选择，加0，0，1，0；
3. 对于选择器中的每一个元素、伪元素，加0，0，0，1；
4. 结合符与通配符对于选择器的特殊性没有任何贡献。
注意：
1. 0，0，1，0的特殊性比0，0，0，13的特殊性更高。
2. 通配符 * 的特殊性为0，0，0，0，它是有特殊性的；结合符（比如h1+p中的“+”）根本没有特殊性；继承而来的样式也没有特殊性。
请看如下代码：
<head>
<style>
*{
color:red;
}
body{
color:cyan;
}
</style>
</head>
<body>
<p>Whatkindofcolorthisparawillbe?</p>
</body>页面显示如下：
4. 行内样式的特殊性最高，为1，0，0，0。
5. 标记为!important的声明被称为重要声明，它没有特殊性，不过要与非重要声明分开考虑。
具体而言：非重要声明分为一组，它们之间的冲突使用特殊性解决；重要声明分为一组，它们之间的冲突内部解决；重要声明总是比非重要声明优先。
二、继承
1. 继承没有任何特殊性，记住这一点往往能明白很多问题。
请看如下代码：
<head>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
</body>页面效果：
为什么设置了
元素的颜色为红色，元素的颜色却是蓝色？
这并不是因为元素不继承父元素的颜色（原谅我之前就是这么认为的），而是因为元素继承了 元素的颜色，但是这个继承来的样式根本没有特殊性，然而浏览器默认样式中对元素设置了样式，很明显浏览器默认样式的特殊性更高，于是元素就按照浏览器默认样式显示。 2.
关于CSS中的继承：一般而言，只能子元素继承父元素的样式，也就是说样式在DOM中只能向下传递，不能向上；但是有一个例外，应用到body元素的背景样式可以向上传递到html元素，相应地可以定义其画布。 三、层叠 层叠规则： 1. 按权重排序。读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。 2. 权重相同的情况下，按照特殊性排序，特殊性越高的胜出。 3. 特殊性相同的情况下，按照样式表中的顺序排序，后出现的胜出。 btw，正是因为这个规则，才会使用LoVe-HA的顺序声明链接样式（LoVe-HA 依次为 :link; :visited; :hover;
:active）。 以上就是CSS特殊性、继承与层叠的内容，更多相关文章请关注PHP中文网（www.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
AI Hentai Generator
Menjana ai hentai secara percuma.
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)
Topik panas
1359
52
Bagaimana cara mengeluarkan gaya lalai dalam senarai bootstrap?
Apr 07, 2025 am 10:18 AM
Gaya lalai senarai bootstrap boleh dikeluarkan dengan mengatasi CSS. Gunakan peraturan dan pemilih CSS yang lebih spesifik, ikuti "Prinsip Jarak" dan "Prinsip Berat", mengatasi gaya lalai bootstrap. Untuk mengelakkan konflik gaya, lebih banyak pemilih yang disasarkan boleh digunakan. Sekiranya penindasan tidak berjaya, laraskan berat CSS adat. Pada masa yang sama, perhatikan pengoptimuman prestasi, elakkan terlalu banyak! Penting, dan tulis kod CSS ringkas dan cekap.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara susun atur bootstrap
Apr 07, 2025 pm 02:24 PM
Untuk menggunakan bootstrap untuk susun atur laman web, anda perlu menggunakan sistem grid untuk membahagikan halaman ke dalam bekas, baris, dan lajur. Mula -mula tambahkan bekas, kemudian tambahkan baris di dalamnya, tambahkan lajur dalam baris, dan akhirnya tambah kandungan dalam lajur. Fungsi susun atur responsif Bootstrap secara automatik menyesuaikan susun atur mengikut titik putus (XS, SM, MD, LG, XL). Susun atur yang berbeza di bawah saiz skrin yang berbeza boleh dicapai dengan menggunakan kelas responsif.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara memuat naik fail pada bootstrap
Apr 07, 2025 pm 01:09 PM
Fungsi muat naik fail boleh dilaksanakan melalui bootstrap. Langkah -langkah adalah seperti berikut: Memperkenalkan fail bootstrap CSS dan JavaScript; Buat medan input fail; Buat butang muat naik fail; mengendalikan muat naik fail (menggunakan FormData untuk mengumpul data dan kemudian hantar ke pelayan); gaya tersuai (pilihan).
Cara Membina Rangka Kerja Bootstrap
Apr 07, 2025 pm 12:57 PM
Untuk membuat rangka kerja bootstrap, ikuti langkah -langkah ini: Pasang bootstrap melalui CDN atau pasang salinan tempatan. Buat dokumen HTML dan pautan bootstrap CSS ke & lt; kepala & gt; seksyen. Tambah fail bootstrap JavaScript ke body & lt; body & gt; seksyen. Gunakan komponen bootstrap dan menyesuaikan lembaran gaya untuk memenuhi keperluan anda.
Bagaimana cara menukar saiz senarai bootstrap?
Apr 07, 2025 am 10:45 AM
Saiz senarai bootstrap bergantung kepada saiz bekas yang mengandungi senarai, bukan senarai itu sendiri. Menggunakan sistem grid Bootstrap atau Flexbox boleh mengawal saiz bekas, dengan itu secara tidak langsung mengubah saiz item senarai.
