• <mark id="7cwvy"></mark>
  • \n    
    \n\n\n\n
    Explanation<\/strong><\/p>\n\n
    Basic Styles<\/em>
    \n        The .box class defines small red rectangles with a margin.
    \n        The .circle class creates blue circular elements.<\/p>\n\n
    Dynamic Sizing Using :has():
    \n        The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.
    \n        This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.<\/p>\n\n
    Visual Output<\/em><\/p>\n\n
    Initially, the boxes are uniform in size.
    \nThe .box element immediately preceding a .circle grows larger due to the :has() rule.<\/p>\n\n
    \"CSS<\/p>\n
    \n  \n  \n  Use Cases for :has()\n<\/h2>\n\n
    The :has() pseudo-class is versatile and can be applied in numerous scenarios:<\/p>\n
    \n  \n  \n  1. Interactive Layouts<\/strong>\n<\/h3>\n\n
    Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.
    \n<\/p>\n\n
    .card:has(button) {\n  border: 2px solid green;\n}\n<\/pre>\n\n\n\n
    \n  \n  \n  2. Menu Navigasi Dinamik<\/strong>\n<\/h3>\n\n
    Gunakan gaya pada ibu bapa 
  •  jika ia mengandungi menu lungsur turun.
    \n\n\n
    li:has(ul) {\n  font-weight: bold;\n}\n<\/pre>\n\n\n\n
    \n  \n  \n  3. Pengesahan Borang<\/strong>\n<\/h3>\n\n
    Serlahkan medan input tidak sah berdasarkan unsur adik beradik atau ibu bapa.
    \n<\/p>\n\n
    .form-group:has(input:invalid) {\n  border-color: red;\n}\n<\/pre>\n\n\n\n
    \n  \n  \n  4. Hubungan Adik Beradik Tersuai<\/strong>\n<\/h3>\n\n
    Gayakan elemen berdasarkan adik beradiknya yang bersebelahan.
    \n<\/p>\n\n
    h1:has(+ p) {\n  margin-bottom: 10px;\n}\n<\/pre>\n\n\n\n
    \n  \n  \n  Kelebihan :has()\n<\/h2>\n\n
      \n
    1. \n
      Meningkatkan Kebolehbacaan<\/strong>:<\/p>\n\n
        \n
      • Mengurangkan keperluan JavaScript kompleks untuk mengesan dan memanipulasi DOM.<\/li>\n<\/ul>\n<\/li>\n
      • \n
        Meningkatkan Prestasi<\/strong>:<\/p>\n\n
          \n
        • Ringan dan cekap berbanding dengan penyelesaian JavaScript untuk kesan yang serupa.<\/li>\n<\/ul>\n<\/li>\n
        • \n
          Memudahkan CSS<\/strong>:<\/p>\n\n
            \n
          • Mendayakan penggayaan deklaratif untuk perhubungan yang kompleks, meminimumkan kelas atau atribut tambahan.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
            \n\n
            \n  \n  \n  Sokongan Pelayar\n<\/h2>\n\n
            Setakat ini, kelas pseudo :has() disokong oleh kebanyakan penyemak imbas moden, termasuk:<\/p>\n\n<\/pre>\n
              \n
            • \nChrome<\/strong>: 105 <\/li>\n
            • \nTepi<\/strong>: 105 <\/li>\n
            • \nSafari<\/strong>: 15.4 <\/li>\n
            • \nFirefox<\/strong>: Sokongan sedang dipertimbangkan.<\/li>\n<\/ul>\n\n
              Untuk penyemak imbas lama, anda mungkin memerlukan sandaran atau polyfill.<\/p>\n
              \n\n
              \n  \n  \n  Kesimpulan\n<\/h2>\n\n
              Kelas pseudo :has() ialah penukar permainan dalam CSS moden, membawa keupayaan pemilih induk yang telah lama ditunggu-tunggu. Dengan keupayaannya untuk menggayakan elemen secara bersyarat berdasarkan perhubungannya, ia memudahkan kod CSS, meningkatkan penggayaan dinamik dan mengurangkan pergantungan pada JavaScript untuk manipulasi DOM.<\/p>\n\n
              Teroka kelas pseudo :has() dalam projek anda dan buka kunci kemungkinan baharu untuk reka bentuk web yang kreatif dan cekap!<\/p>\n\n\n          \n\n            \n        "}	
	







              亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
              
	

              
    

              

	
	
              
		
              
			
              
							
              
					
              
						Rumah
						
												hujung hadapan web
						
												tutorial css
						
						CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik
					
              
					
					
              
						
              
							
              CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik
              
							
							Dec 23, 2024 pm	 06:55 PM
														
						
              
					
              
					
              
					
              
						
              
						
						
						

					
              CSS terus berkembang untuk membolehkan pembangun membina halaman web yang dinamik, intuitif dan menarik secara visual dengan mudah. Satu peningkatan tersebut ialah :has() pseudo-class, yang diperkenalkan dalam CSS moden. Kelas pseudo ini membawa keupayaan pemilihan sedar ibu bapa, membolehkan anda menggunakan gaya secara bersyarat berdasarkan kehadiran atau keadaan elemen kanak-kanak atau adik-beradik.
              


              Artikel ini menerangkan kelas pseudo :has() dengan contoh untuk menunjukkan fleksibiliti dan kuasanya.
              


              
  
  
  Apakah itu :has() Pseudo-Class?

              


              Kelas pseudo :has() sering dirujuk sebagai "pemilih ibu bapa" kerana ia membolehkan anda menggayakan elemen berdasarkan anak, adik beradik atau keturunannya.
              

              


              selector:has(selectorList)


              




                

              • pemilih ialah elemen utama yang digunakan oleh peraturan.
                • 

              • selectorList ialah syarat, yang boleh termasuk kanak-kanak, adik beradik atau elemen lain yang berkaitan dengan elemen utama.
                • 

              


              Ciri Utama
              


                

              • Kesedaran ibu bapa: Gaya digunakan pada elemen berdasarkan keturunan atau adik-beradiknya.
                • 

              •  Keadaan fleksibel: Berfungsi dengan penggabung seperti , ~ dan > untuk perhubungan adik beradik dan anak.
                • 

              • Interativiti yang dipertingkatkan: Berguna untuk mencipta reka letak atau kesan dinamik tanpa bergantung pada JavaScript.
                • 

              


              Contoh Praktikal: Menggunakan :has() untuk Menggayakan Kotak Berdasarkan Adik Beradiknya
              

              


              body {
  font-family: sans-serif;
}

.box {
  width: 50px;
  height: 40px;
  background-color: red;
  margin: 5px;
}

.border {
  border: 2px solid black;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 25px;
}

/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
  width: 80px;
  height: 80px;
}


              






              <!DOCTYPE html>
<html>
  <head>
    <title>CSS :has() Example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div>



<p><strong>Explanation</strong></p>

<p><em>Basic Styles</em><br>
        The .box class defines small red rectangles with a margin.<br>
        The .circle class creates blue circular elements.</p>

<p>Dynamic Sizing Using :has():<br>
        The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
        This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>

<p><em>Visual Output</em></p>

<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg"  class="lazy" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling" /></p>
<h2>
  
  
  Use Cases for :has()
</h2>

<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
  
  
  1. <strong>Interactive Layouts</strong>
</h3>

<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>

<pre class="brush:php;toolbar:false">.card:has(button) {
  border: 2px solid green;
}

              




              
  
  
  2. Menu Navigasi Dinamik

              


              Gunakan gaya pada ibu bapa 
            •  jika ia mengandungi menu lungsur turun.
              



              li:has(ul) {
  font-weight: bold;
}

              




              
  
  
  3. Pengesahan Borang

              


              Serlahkan medan input tidak sah berdasarkan unsur adik beradik atau ibu bapa.
              

              


              .form-group:has(input:invalid) {
  border-color: red;
}

              




              
  
  
  4. Hubungan Adik Beradik Tersuai

              


              Gayakan elemen berdasarkan adik beradiknya yang bersebelahan.
              

              


              h1:has(+ p) {
  margin-bottom: 10px;
}

              




              
  
  
  Kelebihan :has()

              


                

              1. 

                Meningkatkan Kebolehbacaan:
                


                  

                • Mengurangkan keperluan JavaScript kompleks untuk mengesan dan memanipulasi DOM.
                  • 

                

                2. 

              2. 

                Meningkatkan Prestasi:
                


                  

                • Ringan dan cekap berbanding dengan penyelesaian JavaScript untuk kesan yang serupa.
                  • 

                

                3. 

              3. 

                Memudahkan CSS:
                


                  

                • Mendayakan penggayaan deklaratif untuk perhubungan yang kompleks, meminimumkan kelas atau atribut tambahan.
                  • 

                

                4. 

              



              


              
  
  
  Sokongan Pelayar

              


              Setakat ini, kelas pseudo :has() disokong oleh kebanyakan penyemak imbas moden, termasuk:
              


    

      

    • 
Chrome: 105 
      • 

    • 
Tepi: 105 
      • 

    • 
Safari: 15.4 
      • 

    • 
Firefox: Sokongan sedang dipertimbangkan.
      • 

    


    Untuk penyemak imbas lama, anda mungkin memerlukan sandaran atau polyfill.
    

    


    
  
  
  Kesimpulan

    


    Kelas pseudo :has() ialah penukar permainan dalam CSS moden, membawa keupayaan pemilih induk yang telah lama ditunggu-tunggu. Dengan keupayaannya untuk menggayakan elemen secara bersyarat berdasarkan perhubungannya, ia memudahkan kod CSS, meningkatkan penggayaan dinamik dan mengurangkan pergantungan pada JavaScript untuk manipulasi DOM.
    


    Teroka kelas pseudo :has() dalam projek anda dan buka kunci kemungkinan baharu untuk reka bentuk web yang kreatif dan cekap!
    


          

            
        
    Atas ialah kandungan terperinci CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
    


						
    • 
					
					
    
						
    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
    
								
    
								
    
																		
    
											
												Undress AI Tool
											
											
    
												
													
    Undress AI Tool
    
												    
												
    Gambar buka pakaian secara percuma
    
											
    
										
    
																		
    
											
												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.
    
											
    
										
    
																		
    
											
												Clothoff.io
											
											
    
												
													
    Clothoff.io
    
												    
												
    Penyingkiran pakaian AI
    
											
    
										
    
																		
    
											
												Video Face Swap
											
											
    
												
													
    Video Face Swap
    
												    
												
    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
    
											
    
										
    
																
    
								
							
    
						
    
					


					


											
    
							
    
								
    
									
									
    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)
    
											
    
										
    
																	
    
								
							
    
						
    
										

					
					
    
						
    
							
    
								
								
    Topik panas
    
							
    
							
    
															
															
    
									Tutorial PHP
									
    
										
    
											
											1488
										
    
										
    
											
											72
										
    
									
    
								
    
														
    
							
						
    
					
    
				
    
			
							
    
					
    
						
						
    

													
    
								
									Tutorial CSS untuk membuat pemuatan dan animasi pemuatan
								
								Tutorial CSS untuk membuat pemuatan dan animasi pemuatan
								Jul 07, 2025 am	 12:07 AM
								
    Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.
    
							
    
														
    
								
									Menangani masalah dan awalan keserasian penyemak imbas CSS
								
								Menangani masalah dan awalan keserasian penyemak imbas CSS
								Jul 07, 2025 am	 01:44 AM
								
    Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,
    
							
    
														
    
								
									Membuat bentuk tersuai dengan laluan klip CSS
								
								Membuat bentuk tersuai dengan laluan klip CSS
								Jul 09, 2025 am	 01:29 AM
								
    Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis
    
							
    
														
    
								
									Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?
								
								Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?
								Jul 11, 2025 am	 03:25 AM
								
    Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/
    
							
    
														
    
								
									Gaya yang dikunjungi pautan berbeza dengan CSS
								
								Gaya yang dikunjungi pautan berbeza dengan CSS
								Jul 11, 2025 am	 03:26 AM
								
    Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.
    
							
    
														
    
								
									Bagaimana untuk membuat imej responsif menggunakan CSS?
								
								Bagaimana untuk membuat imej responsif menggunakan CSS?
								Jul 15, 2025 am	 01:10 AM
								
    Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.
    
							
    
														
    
								
									Apakah ketidakkonsistenan penyemak imbas CSS biasa?
								
								Apakah ketidakkonsistenan penyemak imbas CSS biasa?
								Jul 26, 2025 am	 07:04 AM
								
    Penyemak imbas yang berbeza mempunyai perbezaan dalam parsing CSS, mengakibatkan kesan paparan yang tidak konsisten, terutamanya termasuk perbezaan gaya lalai, kaedah pengiraan model kotak, flexbox dan tahap sokongan susun atur grid, dan tingkah laku yang tidak konsisten bagi atribut CSS tertentu. 1. Pemprosesan gaya lalai tidak konsisten. Penyelesaiannya adalah menggunakan cssreset atau normalisasi.css untuk menyatukan gaya awal; 2. Kaedah pengiraan model kotak versi lama IE adalah berbeza. Adalah disyorkan untuk menggunakan kotak-kotak: kotak sempadan dengan cara yang bersatu; 3. Flexbox dan grid melakukan secara berbeza dalam kes kelebihan atau dalam versi lama. Lebih banyak ujian dan gunakan autoprefixer; 4. Beberapa tingkah laku atribut CSS tidak konsisten. CANIUSE mesti dirujuk dan diturunkan.
    
							
    
														
    
								
									Unit CSS Demystifying: PX, EM, REM, VW, VH Perbandingan
								
								Unit CSS Demystifying: PX, EM, REM, VW, VH Perbandingan
								Jul 08, 2025 am	 02:16 AM
								
    Pilihan unit CSS bergantung kepada keperluan reka bentuk dan keperluan responsif. 1.PX digunakan untuk saiz tetap, sesuai untuk kawalan yang tepat tetapi kekurangan keanjalan; 2.EM adalah unit relatif, yang mudah disebabkan oleh pengaruh unsur induk, sementara REM lebih stabil berdasarkan unsur akar dan sesuai untuk skala global; 3.VW/VH didasarkan pada saiz viewport, sesuai untuk reka bentuk yang responsif, tetapi perhatian harus dibayar kepada prestasi di bawah skrin yang melampau; 4. Apabila memilih, ia harus ditentukan berdasarkan sama ada pelarasan responsif, hubungan hierarki elemen dan ketergantungan viewport. Penggunaan yang munasabah boleh meningkatkan fleksibiliti dan penyelenggaraan susun atur.
    
							
    
													
    

													
								See all articles