


Pemilihan CSS yang tepat: Gunakan: bukan pemilih kombinasi untuk mengecualikan unsur -unsur tertentu dan elemen anak langsung mereka
理解CSS :not 伪类选择器
CSS中的:not伪类选择器是一个否定伪类,它允许我们选择不匹配其参数中指定选择器的元素。它提供了一种强大的反向选择机制,使得样式规则的编写更加灵活。例如,div:not(.special) 会选中所有不带有 .special 类的 div 元素。然而,当需要排除一个元素 及其所有嵌套子元素 时,直接使用 :not 可能会遇到一些挑战。
挑战:如何排除一个元素及其所有后代?
在Web开发中,我们经常遇到这样的需求:希望对一个父容器内的所有子元素应用某种通用样式,但需要排除其中一个特定子元素及其内部的所有嵌套内容。一个常见的误解是,container *:not(.wrapper) 能够排除 .wrapper 元素及其所有后代。实际上,*:not(.wrapper) 只会排除 自身 带有 .wrapper 类的元素。对于 .wrapper 内部的子元素,只要它们自身不带有 .wrapper 类,它们仍然会被 container * 选中,并不会被 :not(.wrapper) 排除。
考虑以下HTML结构示例:
<div class="container"> <div> <div> <div> <span>This is the test content 1 .</span> </div> <div class="wrapper_1"> This is the test content 2 <br> <span>This is the test content 3</span> </div> <span class="wrapper_2">This is the test content 4.</span> </div> </div> </div>
如果我们的目标是让 .container 内除了 .wrapper_1 及其所有后代之外的所有元素显示蓝色,而 .wrapper_1 及其后代显示红色,那么简单的 .container *:not(.wrapper_1) 将无法达到预期。例如,wrapper_1 内部的 This is the test content 3 元素自身没有 .wrapper_1 类,因此它仍会被 *:not(.wrapper_1) 选中,从而可能被赋予蓝色。
解决方案::not 组合选择器详解
为了实现更精确的排除,我们可以利用 :not 伪类接受逗号分隔的选择器列表的特性。通过组合多个选择器作为 :not 的参数,我们可以同时排除目标元素本身及其直接子元素。
有效的CSS解决方案如下:
/* 为 wrapper_1 及其后代设置默认颜色 */ .wrapper_1 { color: red; } /* 排除 wrapper_1 及其直接子元素,对其他容器后代应用蓝色 */ .container *:not(.wrapper_1, .wrapper_1 > *){ color: blue; } /* 特殊元素 wrapper_2 设置绿色 */ .wrapper_2 { color: green; }
让我们详细解析这个解决方案的工作原理:
- *`.container **: 这部分是基础选择器,它会匹配.container元素内的所有后代元素,无论是div、span` 还是其他任何标签。
- :not(...): 这是一个否定伪类,用于从 container * 匹配到的元素中排除掉其内部指定选择器所匹配的元素。
-
.wrapper_1: 作为 :not 的第一个参数,它确保了所有自身带有 wrapper_1 类的元素(即 )不会被 color: blue 的规则选中。
- *`.wrapper_1 > **: 作为:not的第二个参数,它进一步排除了所有直接作为.wrapper_1子元素的元素。在我们的示例中,
内部的
和This is the test content 3都是它的直接子元素,因此它们也不会被color: blue` 的规则选中。通过这种组合,我们有效地将 .wrapper_1 元素本身及其所有直接子元素从 color: blue 的规则中排除。由于 .wrapper_1 自身被设置为 color: red,并且CSS的继承机制,其内部的子元素(包括那些被 wrapper_1 > * 明确排除的直接子元素)会继承 red 颜色。而其他不属于 .wrapper_1 或其直接子元素的 .container 后代则会显示 blue。
示例应用与最终效果
结合上述HTML和CSS,我们可以观察到以下样式效果:
- This is the test content 1 .: 这是一个 .container 的后代。它既不是 .wrapper_1 元素,也不是 .wrapper_1 的直接子元素。因此,它匹配 *:not(.wrapper_1, .wrapper_1 > *),最终显示 蓝色。
-
...: 这个元素自身带有 .wrapper_1 类,因此匹配 .wrapper_1 规则,显示 红色。同时,它被 :not(.wrapper_1, ...) 排除,不会受到 blue 规则的影响。
- This is the test content 3: 这个 span 是 .wrapper_1 的直接子元素。它被 :not(..., .wrapper_1 > *) 排除,不会受到 blue 规则的影响。由于其父元素 .wrapper_1 的颜色是红色,它会继承显示 红色。
- This is the test content 4.: 这个元素自身带有 .wrapper_2 类,因此匹配 .wrapper_2 规则,显示 绿色。虽然它也匹配 *:not(...) 规则(因为它既不是 .wrapper_1 也不是其直接子元素),但 .wrapper_2 的类选择器具有更高的特异性,因此 green 颜色会覆盖 blue。
注意事项与最佳实践
- :not 的作用范围: 务必记住 :not 伪类只能排除 匹配自身 的元素,不能直接排除一个元素的整个子树。本教程中的解决方案是利用了 :not 接受多个参数以及CSS继承的特性,来达到特定场景下的排除效果。
- CSS 特异性 (Specificity): 当多个CSS规则可能作用于同一个元素时,具有更高特异性的规则将优先应用。在上述示例中,.wrapper_2 的规则之所以能覆盖 *:not(...) 规则,就是因为类选择器通常比通用选择器结合伪类具有更高的特异性。
- 代码可读性与维护: 复杂的 `:
Atas ialah kandungan terperinci Pemilihan CSS yang tepat: Gunakan: bukan pemilih kombinasi untuk mengecualikan unsur -unsur tertentu dan elemen anak langsung mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
- *`.wrapper_1 > **: 作为:not的第二个参数,它进一步排除了所有直接作为.wrapper_1子元素的元素。在我们的示例中,

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)

Topik panas



Pertama, periksa sama ada laluan atribut SRC adalah betul, dan pastikan laluan relatif atau mutlak sepadan dengan lokasi fail HTML; 2. Sahkan sama ada nama fail dan lanjutan dieja dengan betul dan sensitif kes; 3. Sahkan bahawa fail imej sebenarnya wujud dalam direktori yang ditentukan; 4. Gunakan atribut alt yang sesuai dan pastikan format imej adalah .jpg, .png, .gif atau .webp disokong secara meluas oleh penyemak imbas; 5. Selesaikan masalah cache penyemak imbas, cuba memaksa menyegarkan atau mengakses url imej secara langsung; 6. Semak tetapan kebenaran pelayan untuk memastikan fail itu boleh dibaca dan tidak disekat; 7. Sahkan bahawa sintaks tag IMG adalah betul, termasuk petikan dan perintah atribut yang betul, dan akhirnya menyelesaikan masalah 404 kesilapan atau masalah sintaks melalui alat pemaju penyemak imbas untuk memastikan imej itu dipaparkan secara normal.

Tutorial ini meneroka masalah kegagalan merangkak jika JavaScript secara dinamik memuat kandungan apabila merangkak URL dari laman web menggunakan pakej bahasa R RVEST. Artikel ini menerangkan secara terperinci mengapa kaedah parsing HTML tradisional mungkin tidak sah dan menyediakan penyelesaian yang cekap: dengan mengenal pasti dan terus memanggil antara muka API di belakang laman web, menggunakan pakej HTTR untuk mendapatkan data JSON, dengan itu berjaya mengekstrak maklumat yang diperlukan.

Artikel ini memperincikan cara menggunakan JavaScript tulen untuk menetapkan pilihan menu drop-down secara automatik berdasarkan parameter pertanyaan dalam URL. Dengan menghuraikan URL untuk mendapatkan nilai parameter tertentu dan menyerahkannya kepada atribut nilai elemen sasaran, anda dapat merealisasikan preset menu lungsur apabila halaman dimuatkan. Kaedah ini tidak memerlukan jQuery, mudah dan cekap, dan sesuai untuk senario di mana elemen bentuk perlu dikawal secara dinamik.

Thebdotagisusedtooverridethebrowser'sdefaulttextdirectionrenderingwhendealingwithmixedleft-to-rightandright-to-lefttext, memastikancorrectvisualdisplaybyforcingaspecificdirectionusingthedirattribondaluS "rtemematribondaluS"

Teasyncattributeinhtmlisusedtoloadandexecuteexternaljavascriptfilesasynchronously, membolehkanTheBrowsertodownloadthescriptinparallelwithhtmlparsingandexecuteitimmedilyponcompletion,

Buat butang HTML dan tetapkan acara klik untuk memanggil fungsi JavaScript; 2. Gunakan CSS untuk memasukkan butang ke sudut kanan bawah halaman dan tetapkan keadaan lalai tersembunyi; 3. Dengarkan acara tatal melalui JavaScript, dan paparkan butang apabila jarak tatal melebihi 300px, dan tatal dengan lancar ke bahagian atas apabila diklik. Akhirnya, kembali ke butang atas untuk meningkatkan pengalaman pengguna direalisasikan, dan fungsi penuh selesai dengan kerjasama HTML, CSS dan JavaScript.

Untuk menetapkan nilai lalai untuk elemen HTMLSelect, elemen pilihan yang sepadan mesti ditandakan dengan atribut yang dipilih; 1. Tambah atribut yang dipilih kepada pilihan yang anda mahu pilih secara lalai, seperti UnitedStates; 2. Pastikan hanya satu pilihan dalam satu pilihan telah memilih atribut, dan jika terdapat banyak yang, yang pertama akan menjadi urutan kod sumber; 3. Atribut yang dipilih boleh diletakkan di mana -mana dalam senarai, tidak terhad kepada pilihan pertama; 4. Kaedah ini sesuai untuk pilih tunggal dan pilih pelbagai pilihan; 5. Sekiranya anda perlu menetapkannya secara dinamik, anda boleh menggunakan JavaScript untuk mengendalikan atribut nilai, seperti document.queryselec

TheActionattributespecifieswheretosendtheformdata, andthemethodattributeDefineShowTosenditusingHttpmethods.1.TheActionAttributesThedeStinationUrl (absoluteorrelative);
