hujung hadapan web
tutorial css
Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif
Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif
Mahir dalam dan di mana pemilih: Cipta reka letak CSS yang dinamik dan interaktif
CSS ialah bahagian yang amat diperlukan dalam pembangunan bahagian hadapan, dan ia boleh memberikan pelbagai kesan reka bentuk yang indah untuk halaman web. Antaranya, pemilih ialah salah satu teras CSS, yang boleh membantu kami memilih elemen pada halaman dan menggayakannya. Artikel ini akan memperkenalkan dua pemilih CSS yang biasa digunakan: adalah dan di mana Melalui penggunaan fleksibel mereka, kami boleh mencipta reka letak CSS yang lebih dinamik dan interaktif.
1. ialah pemilih
Pemilih is ialah pemilih baharu yang diperkenalkan dalam CSS Tahap 4. Ia boleh memilih elemen tertentu berdasarkan padanan atribut elemen. Pemilih is mengambil satu atau lebih pemilih sebagai argumen, dipisahkan dengan koma. Contohnya:
nav.is-active,
.header.is-active {
background-color: #ff0000;
color: #ffffff;
}Dalam kod di atas, pemilih nav.is-active dan .header.is-active mewakili pemilihan elemen nav dan .header elemen dengan kelas adalah-aktif. Apabila elemen ini dipilih, gaya yang sepadan digunakan, termasuk warna latar belakang merah dan warna fon putih.
Dengan pemilih is, kami boleh memilih elemen berdasarkan nilai atribut yang berbeza untuk mencapai kesan penukaran gaya dinamik. Contohnya, dalam bar navigasi, kita boleh menambah kelas aktif berdasarkan item navigasi yang dipilih pada masa ini, dan kemudian gunakan pemilih ialah untuk menambah gaya berbeza pada item navigasi berbeza untuk menyerlahkan item yang dipilih pada masa ini.
2. Pemilih tempat
Pemilih tempat juga merupakan pemilih baharu yang diperkenalkan dalam CSS Tahap 4. Ia boleh memilih elemen berdasarkan syarat pemilih yang ditentukan, serupa dengan pengendali logik CSS. Contohnya:
div:where(.is-active) {
background-color: #ff0000;
color: #ffffff;
}Dalam kod di atas, pemilih div:where(.is-active) bermaksud memilih elemen div dengan kelas adalah-aktif. Apabila elemen dipilih, gaya yang sepadan digunakan, termasuk warna latar belakang merah dan warna fon putih.
Dengan pemilih tempat, kami boleh memilih elemen dengan keadaan tertentu dengan lebih fleksibel, seperti memilih elemen anak pertama atau memilih elemen anak terakhir dan memilih berdasarkan kedudukan elemen dalam aliran dokumen. Dengan cara ini, kita boleh menetapkan gaya yang sepadan mengikut kedudukan dan status elemen untuk mencapai kesan susun atur yang lebih dinamik dan interaktif.
3. Contoh Aplikasi
Berikut ialah contoh mudah yang menunjukkan cara menggunakan is dan tempat pemilih untuk mencipta reka letak CSS yang dinamik dan interaktif.
<!DOCTYPE html>
<html>
<head>
<style>
div:where(.is-active) {
background-color: #ff0000;
color: #ffffff;
}
nav.is-active,
.header.is-active {
background-color: #ff0000;
color: #ffffff;
}
.nav-item:hover {
background-color: #0000ff;
color: #ffffff;
}
</style>
</head>
<body>
<div class="is-active">Div 1</div>
<div>Div 2</div>
<nav class="is-active">Nav 1</nav>
<nav>Nav 2</nav>
<div class="header is-active">Header 1</div>
<div class="header">Header 2</div>
<ul class="nav-list">
<li class="nav-item">Item 1</li>
<li class="nav-item">Item 2</li>
<li class="nav-item">Item 3</li>
</ul>
</body>
</html>Melalui kod di atas, anda boleh melihat bahawa apabila elemen dengan nama kelas aktif dipilih, warna latar belakang dan warna fonnya akan bertukar merah pada masa yang sama, apabila tetikus melayang di atas elemen dengan kelas name nav-item , warna latar belakang dan warna fon akan bertukar menjadi biru.
Contoh ini menunjukkan cara menambah gaya tertentu pada elemen berdasarkan status dan atributnya untuk mencapai kesan reka letak CSS yang dinamik dan interaktif.
Ringkasan:
Dengan pemilih is dan pemilih tempat, kami boleh memilih dan menggayakan elemen dengan lebih fleksibel, seterusnya mencipta reka letak CSS yang lebih dinamik dan interaktif. Pengenalan mereka memberikan lebih banyak pilihan dan kemungkinan untuk pembangunan bahagian hadapan, membolehkan kami memenuhi keperluan reka bentuk yang berbeza dan pengalaman interaksi pengguna dengan lebih baik. Untuk mendapatkan maklumat lanjut tentang penggunaan dan contoh pemilih ialah dan pemilih tempat, anda boleh merujuk dokumen dan tutorial yang berkaitan untuk menguasai kemahiran aplikasi mereka dan menambah lebih banyak kreativiti dan sorotan pada reka bentuk dan reka letak halaman anda.
Atas ialah kandungan terperinci Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
1378
52
Soalan yang sering ditanya oleh penemuduga front-end
Mar 19, 2024 pm 02:24 PM
Dalam temu bual pembangunan bahagian hadapan, soalan lazim merangkumi pelbagai topik, termasuk asas HTML/CSS, asas JavaScript, rangka kerja dan perpustakaan, pengalaman projek, algoritma dan struktur data, pengoptimuman prestasi, permintaan merentas domain, kejuruteraan bahagian hadapan, corak reka bentuk, dan teknologi dan trend baharu. Soalan penemuduga direka bentuk untuk menilai kemahiran teknikal calon, pengalaman projek dan pemahaman tentang trend industri. Oleh itu, calon harus bersedia sepenuhnya dalam bidang ini untuk menunjukkan kebolehan dan kepakaran mereka.
Evolusi dan aplikasi unit susun atur CSS: daripada piksel kepada unit relatif berdasarkan saiz fon elemen akar
Jan 05, 2024 pm 05:41 PM
Dari px ke rem: Evolusi dan aplikasi unit susun atur CSS Pengenalan: Dalam pembangunan bahagian hadapan, kita selalunya perlu menggunakan CSS untuk melaksanakan reka letak halaman. Sejak beberapa tahun kebelakangan ini, unit susun atur CSS telah berkembang dan berkembang. Pada mulanya kami menggunakan piksel (px) sebagai unit untuk menetapkan saiz dan kedudukan elemen. Walau bagaimanapun, dengan peningkatan reka bentuk responsif dan populariti peranti mudah alih, unit piksel telah mendedahkan beberapa masalah secara beransur-ansur. Untuk menyelesaikan masalah ini, rem unit baharu wujud dan secara beransur-ansur digunakan secara meluas dalam reka letak CSS. satu
Kaedah dan teknik bagaimana untuk melaksanakan susun atur aliran air terjun melalui CSS tulen
Oct 20, 2023 pm 06:01 PM
Kaedah dan teknik tentang cara melaksanakan susun atur aliran air terjun melalui CSS tulen (Susun Letak Air Terjun) ialah kaedah reka letak biasa dalam reka bentuk web. Reka letak ini sering digunakan dalam situasi di mana sejumlah besar kandungan perlu dipaparkan, seperti paparan gambar dan paparan produk, dan mempunyai pengalaman pengguna yang baik. Terdapat banyak cara untuk melaksanakan susun atur air terjun, dan ia boleh dilakukan menggunakan JavaScript atau CSS.
Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Ikon Grid Pekeliling
Oct 20, 2023 am 10:46 AM
Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Tataletak Ikon Grid Pekeliling Susun atur Grid ialah teknik reka letak yang biasa dan berkuasa dalam reka bentuk web moden. Susun atur ikon grid bulat adalah pilihan reka bentuk yang lebih unik dan menarik. Artikel ini akan memperkenalkan beberapa amalan terbaik dan contoh kod khusus untuk membantu anda melaksanakan reka letak ikon grid bulat. Struktur HTML Mula-mula, kita perlu menyediakan elemen bekas dan letakkan ikon dalam bekas ini. Kita boleh menggunakan senarai tidak tertib (<ul>) sebagai bekas dan item senarai (<l
Kaedah susun atur Kedudukan CSS untuk melaksanakan susun atur imej responsif
Sep 26, 2023 pm 01:37 PM
Kaedah susun atur CSSPositions untuk melaksanakan susun atur imej responsif Dalam pembangunan web moden, reka bentuk responsif telah menjadi kemahiran penting. Dalam reka bentuk responsif, susun atur imej adalah salah satu pertimbangan penting. Artikel ini akan memperkenalkan cara menggunakan reka letak CSSPositions untuk melaksanakan reka letak imej responsif dan menyediakan contoh kod khusus. CSSPositions ialah kaedah susun atur CSS yang membolehkan kami meletakkan elemen sewenang-wenangnya dalam halaman web mengikut keperluan. Dalam susun atur imej responsif,
Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Holy Grail
Oct 19, 2023 am 10:19 AM
Tutorial Layout CSS: Cara Terbaik untuk Melaksanakan Holy Grail Layout, dengan Contoh Kod Pengenalan: Dalam pembangunan web, reka letak adalah bahagian yang sangat penting. Reka letak yang baik boleh menjadikan halaman web lebih mudah dibaca dan boleh diakses. Antaranya, susun atur Holy Grail ialah kaedah susun atur yang sangat klasik Ia boleh memusatkan kandungan dan mengekalkan kesan paparan yang elegan sambil mencapai kebolehsuaian. Artikel ini akan memperkenalkan cara menggunakan kaedah terbaik untuk melaksanakan susun atur Holy Grail dan memberikan contoh kod khusus. 1. Apakah susun atur Holy Grail? Susun atur Holy Grail ialah susun atur tiga lajur biasa.
Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Kad Bertindan
Oct 22, 2023 am 08:19 AM
Petua Reka Letak CSS: Amalan Terbaik untuk Mencapai Kesan Kad Bertindan Dalam reka bentuk web moden, reka letak kad telah menjadi trend reka bentuk yang sangat popular. Reka letak kad boleh memaparkan maklumat dengan berkesan, memberikan pengalaman pengguna yang baik dan memudahkan reka bentuk responsif. Dalam artikel ini, kami akan berkongsi beberapa teknik reka letak CSS terbaik untuk mencapai kesan kad bertindan, bersama-sama dengan contoh kod khusus. Reka letak menggunakan Flexbox Flexbox ialah model susun atur berkuasa yang diperkenalkan dalam CSS3. Ia boleh mencapai kesan menyusun kad dengan mudah
Tutorial reka letak CSS: Cara terbaik untuk melaksanakan reka letak responsif dua lajur
Oct 18, 2023 am 11:04 AM
Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Responsif Dua Lajur Pengenalan: Dalam reka bentuk web, reka letak responsif ialah teknologi yang sangat penting yang membolehkan halaman web melaraskan reka letaknya secara automatik mengikut saiz skrin dan resolusi peranti pengguna, memberikan Lebih Baik pengalaman pengguna. Dalam tutorial ini, kami akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan reka letak responsif dua lajur yang mudah dan memberikan contoh kod khusus. 1. Struktur HTML: Pertama, kita perlu mencipta struktur HTML asas, seperti yang ditunjukkan di bawah: <!DOCTYPEht
