Selamat malam kolega sayang, hari ini kita akan menjelajah dengan Anda dua tambahan selector.dipanggil anak Perusahaan CSS dan pemilih yang berdekatan. Pada tingkat yang lebih besar, dimungkinkan untuk melakukannya tanpa mereka, bagaimanapun, untuk pengembangan Anda, mereka harus berasimilasi, dan kadang-kadang berlaku bahwa mereka tetap dalam memori Anda. Karena itu, kita akan membahas apa selectors. Mereka berdekatan, dan apa anak perusahaannya dan memahami contohnya.
Anak perusahaan CSS. - Elemen yang terletak di dalam elemen induk. Contohnya mungkin sebagai berikut. Kami memiliki blok di mana ada paragraf, blok lain dan gambar. Ini adalah tiga elemen ini adalah anak perusahaan. Jika elemen lain juga terletak di blok anak, maka mereka bukan lagi anak perusahaan di blok pertama, tetapi merupakan anak perusahaan di blok di mana mereka secara langsung. Saya harap Anda menangkap esensi.
Pemilih CSS tetangga - Elemen terletak di satu sama lain dalam kode dokumen. Contoh dari ini adalah. Kami memiliki paragraf dan tag berikut menjangkau. Semuanya cukup jelas, tetapi kita hanya perlu membongkar semua ini dalam contoh nyata.
Teks dalam paragraf
Teks dalam rentang.
Tidak ada lagi teks anak dalam paragraf
Dengan bantuan gaya tambahkan hasil yang sama untuk tag menjangkau
Jaman \u003e rentang (
ukuran font: 200%;
}
p. + rentang (
warna merah;
}
Hasil dari kode dalam kedua kasus akan diterapkan pada tag menjangkaukarena itu adalah anak perusahaan dalam kaitannya dengan tag jaman dan selanjutnya setelah tag p.. Karena itu, font telah menjadi dua kali lebih dan merah. Sekarang kami sepenuhnya berurusan dengan anak Perusahaan dan Pemilih Dilek di CSSDan Anda hanya dapat memperkuat pengetahuan Anda dalam praktik, segera!
Sintaks CSS mudah, dan untuk memahami itu tidak perlu memiliki gelar doktor di bidang TI. Namun, ini adalah salah satu dari sedikit bahasa populer, yang tidak logis dalam arti kata yang paling langsung. Tidak seperti bahasa pemrograman web lainnya, seperti Javascript dan PHP, masalah tidak diselesaikan dalam CSS menggunakan logika biasa. Algoritma seperti "Jika X, lalu buat Y, jika tidak membuat Z" atau "Pilih semua Y, maka buat X" tidak dapat diimplementasikan dalam bahasa seperti CSS. Sederhananya, ini adalah bahasa yang dibuat untuk desain, bahasa untuk desainer, bukan pengembang. Beberapa programmer berpengalaman dengan siapa saya bekerja, itu karena alasan inilah yang menghabiskan banyak upaya untuk menguasai CSS.
Pembelajaran CSS dimulai dengan kelas dan ID, serta menggunakan. Dan # untuk penunjukan elemen langsung. Cukup untuk membangun situs web berfitur lengkap, tetapi ini bukan solusi yang cukup fleksibel jika terjadi perubahan desain yang lengkap. Mari kita lihat pendekatan alternatif untuk mengelola elemen yang sulit dijangkau.
Kombinasi terkait tetangga
Mari kita mulai dengan pemilih, yang nyaman dalam situasi sulit, dari kombinator terkait terdekat. Kombinator terkait tetangga dilambangkan dengan koneksi dua elemen menggunakan tanda +:H1 + P.
Ini menyoroti elemen P berikut yang terletak segera setelah elemen H1 di DOM. Teori ketik mengasumsikan bahwa kita harus menggunakan indentasi dalam paragraf teks, tetapi hanya jika mereka mengikuti paragraf lainnya. Dalam praktiknya, ini dapat digunakan untuk membuat indentasi dalam semua paragraf, kecuali untuk yang pertama:
P + P (teks-indentasi: 1EM;)
Ini jauh lebih nyaman daripada menyoroti paragraf pertama dengan kelas \u003d "pertama". Tiga baris, tidak ada kelas dan dukungan penuh dari browser. Jika Anda memiliki tag IMG yang terkait dengan konten situs, di dalam tag P (seperti, pada kenyataannya, dan Anda harus melakukannya), Anda bisa mendorong kembali bidang kiri mereka menggunakan nilai negatif -1EM:
P + p img (margin-kiri: -1em;)
Cukup sederhana, bukan? Dan bagaimana jika kita ingin menyoroti baris pertama semua paragraf yang berdiri segera setelah berita utama, tanpa mengubah semua paragraf lainnya? Sekali lagi, kita dapat menggunakan kelas presentasi. Pemilih sederhana yang terbuat dari kombinasi senyawa tetangga, dan elemen pseudo akan mengatasi tugas:
H1 + P :: First-line (font-varian: topi kecil;)
Catatan: Elemen-Pseudo: Lini Pertama diterima di CSS 2.1, CSS 3 menggunakan entri :: Untuk menetapkan perbedaan antara kelas pseudo dan elemen pseudo.
Kombinator sehat
Protokol Markup Biasa adalah ruang partisi dalam elemen bernama di #Page atau #Wrap:Dalam subpos masa lalu, kami mempelajari hubungan terkait antara tag dokumen HTML, termasuk pemilih anak perusahaan. Sekarang saatnya untuk berkenalan dengan pemilih elemen terkait dan pemilih elemen tetangga.
Selectors tetangga
Dengan bantuan pemilih tetangga (juga disebut terkait), elemen-elemen halaman web yang memiliki induk biasa dan mereka di sebelah satu sama lain dipilih. Gayanya berlaku untuk yang terakhir di item pemilih.
Contoh: Misalkan Anda membutuhkan setiap paragraf
Yang pertama setelah header
, memiliki font cenderung. Ini dapat diimplementasikan menggunakan kode CSS tersebut:
H1 + P (gaya font: italic;)
Mengingat aturan ini, pertama-tama, Anda harus menentukan nama tetangga pertama, kemudian menambahkan simbol + dan nama tetangga kedua (yang kami ingin menerapkan gaya). Anda dapat membuat kombinasi yang lebih panjang. Skema Penulisan Selector: Selector1 + Selector2 + ... + Selectorn () (Gaya diterapkan untuk Selectorn).
Contoh penulisan:
/ * Indentasi paragraf ke 30px * / p + img (padding-top: 30px;) / * warna hijau untuk paragraf, yang mengikuti setelah H3 dalam bundel dengan H2 * / H2 + H3 + P (Warna: Green;)
Pemilih Terkait.
Pemilih Terkait (Nama Lain: Keperawatan, saudara kandung) memungkinkan Anda memilih elemen halaman HTML yang terkait satu sama lain (yaitu, memiliki orang tua yang sama dan pada level yang sama). Pemilih keperawatan mirip dengan tetangga, tetapi berbeda dengan gaya berlaku untuk semua elemen dari jenis yang dipilih, dan bukan hanya yang pertama dari mereka. Alih-alih tanda +, simbol Tilda digunakan ~.
Contoh: Saya akan mengubah tugas sebelumnya sedikit dan bayangkan Anda perlu membuat font cenderung untuk semua paragraf
Yang datang setelah header
. Kode CSS akan terlihat seperti ini:
H1 ~ P (gaya font: italic;)
... dan sedikit html misalnya:
Judul 1.
Judul 2.
Lihatlah kode HTML: Gaya akan berlaku untuk semua tag.
Yang mengikuti setelah Menandai
dan berlokasi sebelum Tag Tag Parent. . Dalam varian kami ada 3 elemen. Dimana gaya berlaku. Perhatikan bahwa tag
Itu tidak menyakiti ini. Perhatikan juga bahwa dalam gaya kasus ini tidak akan diterapkan pada tag
Yang terletak lebih
serta tag
Memiliki orang tua lain
.
kesimpulan.
Menggunakan pemilih yang berdekatan (berdekatan), Anda dapat menggunakan gaya ke item dalam kasus tersebut ketika harus segera setelah elemen lain (atau grup elemen). Ini bekerja dengan elemen yang berada pada level yang sama dan memiliki orang tua yang umum.
Dengan bantuan pemilih terkait, Anda dapat menerapkan gaya ke semua elemen dari jenis yang dipilih dalam kasus tersebut ketika mereka diikuti segera setelah elemen lain (atau grup elemen). Ini bekerja dengan elemen yang berada pada level yang sama dan memiliki orang tua yang umum.
Deskripsi
Tetangga elemen halaman web ketika mereka mengikuti diri sendiri setelah satu sama lain dalam kode dokumen.
Sintaksis
E + F (deskripsi aturan gaya)
Untuk mengontrol elemen yang berdekatan, simbol plus (+) digunakan, yang diinstal antara dua pemilih E dan F. Ruang di sekitar plus tidak diperlukan. Gaya dengan entri seperti itu diterapkan pada elemen F, tetapi hanya jika berdekatan dengan E Element E dan harus segera setelahnya. Pertimbangkan beberapa contoh.
Lorem Ipsum. duka Duduk amet.
Menandai adalah anak perusahaan dalam kaitannya dengan tag
Karena di dalam wadah ini. Masing-masing
Bertindak sebagai orang tua
.
Lorem Ipsum. duka dUDUK Amet.
Tag dan Jangan tumpang tindih dan elemen tetangga. Apa yang mereka letak di dalam wadah Tidak mempengaruhi sikap mereka.
Lorem. ipsum. Dolor duduk amet, konsektorat. AdiPisting. eLIT..
Tetangga di sini adalah tag dan , sebaik dan . Di mana dan Elemen tetangga bukan milik karena kenyataan bahwa ada wadah di antara mereka
.
HTML5 CSS 2.1 IE CR OP SA FX
Selectors tetangga
Lorem. ipsum. Dolor duduk amet, konsektorat. AdiPisting ELIT.
Lorem Ipsum Dolor duduk Amet, konsektorat. AdiPisting ELIT.
Hasil dari contoh ini ditunjukkan pada Gambar. satu.
Ara. 1. Teks Merah untuk Pemilih Tetangga
Browser
Internet Explorer 7 Browser tidak menerapkan gaya jika ada komentar antara pemilih (B + / * Plus * / i).
Halo, pembaca sayang! Lanjutkan topik pemilih css dan hari ini saya akan mencoba menjelaskan apa itu pemilih CSS tetangga, serta permainan peran apa pemilih universal. Pengetahuan tentang mekanisme penggunaan semua jenis dana CSS akan mencapai konten dokumen yang optimal dan ringkas, yang menggambarkan gaya elemen, yang merupakan salah satu komponen dari promosi yang berhasil dari sumbernya, sehingga tidak ada pengabaian Kemungkinan memperoleh informasi yang berguna tentang konsep pemilih dan semua jenis spesiesnya.
Jika Anda ingat dan hati-hati mengikuti publikasi, banyak jenis penyeleksi telah dipertimbangkan; ; . Sekali lagi saya mendesak untuk tidak mengabaikan studi tentang fondasi CSS, karena itu akan memberi Anda banyak preferensi di masa depan.
Pemilih universal
Sekarang pergi langsung ke esensi publikasi hari ini. Adapun pemilih universal, itu cukup sederhana, jadi saya tidak akan berhenti di sana untuk waktu yang lama. Sintaksis penulisan aturan CSS, yang menggunakan pemilih universal, yang berikut:
Ini adalah operator "*" dan berarti bahwa kami memiliki pemilih universal. Ini digunakan ketika perlu untuk mengatur satu gaya untuk semua item di halaman web. Terkadang pemilih universal menentukan tidak harus. Misalnya, merekam. * Kelas I.Class dalam kasus ini sepenuhnya identik. Sekarang tentu saja sebuah contoh. Biasanya, yang paling umum adalah definisi font, ukuran dan warna tunggal, serta lokasi teks yang biasa di halaman blog atau situs.
* (Font-Family: Tahoma, Arial, Helvetica, Sans-Serif; / * Font For Text * / Warna: # 646464; / * Warna Teks * / Ukuran Font: 75%; / * Ukuran teks * / Text-align) : Kiri; / * Lokasi Teks * /)
Dengan demikian, Anda dapat menentukan desain teks untuk semua item yang terletak di halaman. Saya perhatikan, untuk kasus tertentu, hasilnya akan mirip jika bukan pemilih universal menggunakan nama tag tubuh, yang mencakup tag semua elemen.
Pemilih CSS tetangga
Nah, sekarang sedikit lebih banyak waktu akan membayar untuk pemilih tetangga. Tetangga elemen halaman web ketika mereka berada tepat di sebelah satu sama lain dalam kode dokumen. Pada saat yang sama, Sintaks Gaya CSS memiliki jenis ini:
Sekarang kita akan mengambil paragraf teks yang ditentukan oleh tag P di mana B, i dan tag besar akan dimasukkan sebagai elemen anak, yang menentukan pemformatan teks, masing-masing, pelepasan huruf tebal, miring dan isolasi dengan meningkatkan font:
Paragraf ini menggunakannya tag B., tag I., tag besar..
Dan menggunakan alat pengeditan CSS dan HTML, yang tertanam dalam versi terbaru dari semua browser populer (,) dan yang merupakan analog dari plugin yang terkenal untuk browser Firefox (), masukkan paragraf ini ke tempat mana saja pada halaman web apa pun (saya lakukan tepat di halaman artikel sebelumnya oleh paragraf pertama). Ini berarti, misalnya, dipanggil hanya dengan menekan tombol F12. Ini dapat digunakan untuk secara praktis memperbaiki judul material "dasar-dasar HTML" dan "buku teks CSS". Jadi, saya memasukkan sepotong teks dalam bentuk paragraf pertama:
Paragraf ini akan eksperimental dan pertimbangkan dengan menggunakan contohnya. selectors tetangga. Seperti yang sudah saya katakan, tag b, i dan besar adalah anak perusahaan untuk tag paragraf p, karena mereka semua langsung di dalam wadah P. Di sini, tetusunya adalah tag B dan i, serta saya dan besar. Sekarang menerapkan aturan CSS untuk pemilih tetangga:
B + i (warna: merah;) i + besar (warna: hijau;)
Setelah gaya ini diterapkan, paragraf akan terlihat seperti ini:
Ini berlaku untuk semua tag webpage, yang mencakup elemen B, I dan Big. Selain itu, harus ada B dan I, saya dan besar di dekatnya, untuk kombinasi lain, CSS ini tidak akan berfungsi. Saya pikir sekarang jelas bagi Anda bagaimana penyeleksi tetangga berlaku saat menulis atau mengedit dokumen CSS. Catatan lain yang sangat penting: Jika Anda punya waktu untuk memperhatikan, maka dalam hal item yang berdekatan, gaya yang ditentukan hanya berlaku untuk elemen kedua.
Contoh dengan paragraf, yang dianggap sangat visual dan memungkinkan Anda untuk dengan cepat memahami esensi pemilih tetangga di CSS. Namun, dalam praktiknya, area lain yang menerapkan pemilih umumnya digunakan. Katakan, sangat sering dalam tubuh artikel itu perlu untuk memasukkan beberapa teks, terutama didekorasi, seperti itu: catatan kaki, catatan, dll.
Untuk keperluan ini, kelas terpisah biasanya membuat dan menerapkannya pada paragraf yang diperlukan. Tetapi cara yang jauh lebih optimal adalah penggunaan pemilih tetangga. Misalnya, di blog saya ada gaya yang dibuat untuk pendaftaran header H3 konvensional.
H3 (ukuran font: 1.7em; / * ukuran font * / teks-align: / * Penempatan teks * / font-berat: / * Desain teks normal * / font-wajah: Tahoma, Arial, Helvetica, SANS-SERIF; / * Gaya Font * / Warna: # 646464; / * Warna Teks * /)
Untuk menyoroti catatan judul atau catatan kaki, atur kelas khusus, katakanlah, put:
H3.put (Warna: Merah; / * Warna Teks * / Margin-Left: 5px; / * Retret di sebelah kiri * / margin-top: 0.5em; / * Indentasi dari atas * / padding: / * Bidang di atas; / * Teks * / Teks-align: kiri; / * Lokasi teks * /)
Sekarang kami menggunakan pemilih yang berdekatan untuk membuat gaya khusus paragraf kalimat, paragraf ini akan ditempatkan langsung di bawah judul dengan gaya "H3.put":
H3.Put + P (latar belakang: # ffefd5; / * Warna latar belakang * / margin-kiri: 15px; / * mundur di kiri * / margin-kanan: 120px; / * mundur di kanan * / margin-top: 0,5 em; / * indentasi dari atas * / padding: 5px; / * bidang di sekitar teks * /)
Sekali lagi, menggunakan alat pengeditan Google Chrome, dengan Anda semua telinga Anda (tapi itu sepadan), masukkan tajuk untuk catatan kaki, tidak lupa untuk meletakkannya untuknya oleh kelas put:
Perhatian!
Kemudian tulis teks catatan kaki itu sendiri:
Materi yang disajikan dalam publikasi ini sangat penting dalam hal mempelajari fondasi CSS (tabel gaya cascading)
.
Setelah semua televitasi ini, kami mendapatkan paragraf catatan kaki di halaman web (saya mengingatkan Anda bahwa paragraf ini saya masukkan pada akhir artikel saya tentang anak perusahaan dan pemilih kontekstual saya):
Sekarang di blog atau situs saat mengikat "put" ke tag apa pun H3 akan dikenakan catatan kaki seperti pada halaman web. Apalagi didekorasi dengan cara khusus hanya paragraf pertama setelah tag H3 dengan "kelas \u003d" menempatkan "". Tetapi inilah yang kami capai, bukan?
Pada hal ini, izinkan saya menyelesaikan manual hari ini, yang berisi algoritma untuk penggunaan tetangga, serta pemilih universal. Saya harap artikel ini akan memudar Anda, pembaca yang terhormat berlangganan
Dimana gaya berlaku. Perhatikan bahwa tag
Itu tidak menyakiti ini. Perhatikan juga bahwa dalam gaya kasus ini tidak akan diterapkan pada tag
Yang terletak lebih
serta tag
Memiliki orang tua lain
kesimpulan.
Menggunakan pemilih yang berdekatan (berdekatan), Anda dapat menggunakan gaya ke item dalam kasus tersebut ketika harus segera setelah elemen lain (atau grup elemen). Ini bekerja dengan elemen yang berada pada level yang sama dan memiliki orang tua yang umum.
Dengan bantuan pemilih terkait, Anda dapat menerapkan gaya ke semua elemen dari jenis yang dipilih dalam kasus tersebut ketika mereka diikuti segera setelah elemen lain (atau grup elemen). Ini bekerja dengan elemen yang berada pada level yang sama dan memiliki orang tua yang umum.
Deskripsi
Tetangga elemen halaman web ketika mereka mengikuti diri sendiri setelah satu sama lain dalam kode dokumen.
Sintaksis
E + F (deskripsi aturan gaya)
Untuk mengontrol elemen yang berdekatan, simbol plus (+) digunakan, yang diinstal antara dua pemilih E dan F. Ruang di sekitar plus tidak diperlukan. Gaya dengan entri seperti itu diterapkan pada elemen F, tetapi hanya jika berdekatan dengan E Element E dan harus segera setelahnya. Pertimbangkan beberapa contoh.
Lorem Ipsum. duka Duduk amet.
Menandai adalah anak perusahaan dalam kaitannya dengan tag
Karena di dalam wadah ini. Masing-masing
Bertindak sebagai orang tua .
Lorem Ipsum. duka dUDUK Amet.
Tag dan Jangan tumpang tindih dan elemen tetangga. Apa yang mereka letak di dalam wadah Tidak mempengaruhi sikap mereka. Lorem. ipsum. Dolor duduk amet, konsektorat. AdiPisting. eLIT..
Tetangga di sini adalah tag dan , sebaik dan . Di mana dan Elemen tetangga bukan milik karena kenyataan bahwa ada wadah di antara mereka .
HTML5 CSS 2.1 IE CR OP SA FX
Lorem. ipsum. Dolor duduk amet, konsektorat. AdiPisting ELIT.
Lorem Ipsum Dolor duduk Amet, konsektorat. AdiPisting ELIT.
Hasil dari contoh ini ditunjukkan pada Gambar. satu.
Ara. 1. Teks Merah untuk Pemilih Tetangga
Browser
Internet Explorer 7 Browser tidak menerapkan gaya jika ada komentar antara pemilih (B + / * Plus * / i).
Halo, pembaca sayang! Lanjutkan topik pemilih css dan hari ini saya akan mencoba menjelaskan apa itu pemilih CSS tetangga, serta permainan peran apa pemilih universal. Pengetahuan tentang mekanisme penggunaan semua jenis dana CSS akan mencapai konten dokumen yang optimal dan ringkas, yang menggambarkan gaya elemen, yang merupakan salah satu komponen dari promosi yang berhasil dari sumbernya, sehingga tidak ada pengabaian Kemungkinan memperoleh informasi yang berguna tentang konsep pemilih dan semua jenis spesiesnya.
Jika Anda ingat dan hati-hati mengikuti publikasi, banyak jenis penyeleksi telah dipertimbangkan; ; . Sekali lagi saya mendesak untuk tidak mengabaikan studi tentang fondasi CSS, karena itu akan memberi Anda banyak preferensi di masa depan.
Pemilih universal
Sekarang pergi langsung ke esensi publikasi hari ini. Adapun pemilih universal, itu cukup sederhana, jadi saya tidak akan berhenti di sana untuk waktu yang lama. Sintaksis penulisan aturan CSS, yang menggunakan pemilih universal, yang berikut:
Ini adalah operator "*" dan berarti bahwa kami memiliki pemilih universal. Ini digunakan ketika perlu untuk mengatur satu gaya untuk semua item di halaman web. Terkadang pemilih universal menentukan tidak harus. Misalnya, merekam. * Kelas I.Class dalam kasus ini sepenuhnya identik. Sekarang tentu saja sebuah contoh. Biasanya, yang paling umum adalah definisi font, ukuran dan warna tunggal, serta lokasi teks yang biasa di halaman blog atau situs.
* (Font-Family: Tahoma, Arial, Helvetica, Sans-Serif; / * Font For Text * / Warna: # 646464; / * Warna Teks * / Ukuran Font: 75%; / * Ukuran teks * / Text-align) : Kiri; / * Lokasi Teks * /)
Dengan demikian, Anda dapat menentukan desain teks untuk semua item yang terletak di halaman. Saya perhatikan, untuk kasus tertentu, hasilnya akan mirip jika bukan pemilih universal menggunakan nama tag tubuh, yang mencakup tag semua elemen.
Pemilih CSS tetangga
Nah, sekarang sedikit lebih banyak waktu akan membayar untuk pemilih tetangga. Tetangga elemen halaman web ketika mereka berada tepat di sebelah satu sama lain dalam kode dokumen. Pada saat yang sama, Sintaks Gaya CSS memiliki jenis ini:
Sekarang kita akan mengambil paragraf teks yang ditentukan oleh tag P di mana B, i dan tag besar akan dimasukkan sebagai elemen anak, yang menentukan pemformatan teks, masing-masing, pelepasan huruf tebal, miring dan isolasi dengan meningkatkan font:
Paragraf ini menggunakannya tag B., tag I., tag besar..
Dan menggunakan alat pengeditan CSS dan HTML, yang tertanam dalam versi terbaru dari semua browser populer (,) dan yang merupakan analog dari plugin yang terkenal untuk browser Firefox (), masukkan paragraf ini ke tempat mana saja pada halaman web apa pun (saya lakukan tepat di halaman artikel sebelumnya oleh paragraf pertama). Ini berarti, misalnya, dipanggil hanya dengan menekan tombol F12. Ini dapat digunakan untuk secara praktis memperbaiki judul material "dasar-dasar HTML" dan "buku teks CSS". Jadi, saya memasukkan sepotong teks dalam bentuk paragraf pertama:
Paragraf ini akan eksperimental dan pertimbangkan dengan menggunakan contohnya. selectors tetangga. Seperti yang sudah saya katakan, tag b, i dan besar adalah anak perusahaan untuk tag paragraf p, karena mereka semua langsung di dalam wadah P. Di sini, tetusunya adalah tag B dan i, serta saya dan besar. Sekarang menerapkan aturan CSS untuk pemilih tetangga:
B + i (warna: merah;) i + besar (warna: hijau;)
Setelah gaya ini diterapkan, paragraf akan terlihat seperti ini:
Ini berlaku untuk semua tag webpage, yang mencakup elemen B, I dan Big. Selain itu, harus ada B dan I, saya dan besar di dekatnya, untuk kombinasi lain, CSS ini tidak akan berfungsi. Saya pikir sekarang jelas bagi Anda bagaimana penyeleksi tetangga berlaku saat menulis atau mengedit dokumen CSS. Catatan lain yang sangat penting: Jika Anda punya waktu untuk memperhatikan, maka dalam hal item yang berdekatan, gaya yang ditentukan hanya berlaku untuk elemen kedua.
Contoh dengan paragraf, yang dianggap sangat visual dan memungkinkan Anda untuk dengan cepat memahami esensi pemilih tetangga di CSS. Namun, dalam praktiknya, area lain yang menerapkan pemilih umumnya digunakan. Katakan, sangat sering dalam tubuh artikel itu perlu untuk memasukkan beberapa teks, terutama didekorasi, seperti itu: catatan kaki, catatan, dll.
Untuk keperluan ini, kelas terpisah biasanya membuat dan menerapkannya pada paragraf yang diperlukan. Tetapi cara yang jauh lebih optimal adalah penggunaan pemilih tetangga. Misalnya, di blog saya ada gaya yang dibuat untuk pendaftaran header H3 konvensional.
H3 (ukuran font: 1.7em; / * ukuran font * / teks-align: / * Penempatan teks * / font-berat: / * Desain teks normal * / font-wajah: Tahoma, Arial, Helvetica, SANS-SERIF; / * Gaya Font * / Warna: # 646464; / * Warna Teks * /)
Untuk menyoroti catatan judul atau catatan kaki, atur kelas khusus, katakanlah, put:
H3.put (Warna: Merah; / * Warna Teks * / Margin-Left: 5px; / * Retret di sebelah kiri * / margin-top: 0.5em; / * Indentasi dari atas * / padding: / * Bidang di atas; / * Teks * / Teks-align: kiri; / * Lokasi teks * /)
Sekarang kami menggunakan pemilih yang berdekatan untuk membuat gaya khusus paragraf kalimat, paragraf ini akan ditempatkan langsung di bawah judul dengan gaya "H3.put":
H3.Put + P (latar belakang: # ffefd5; / * Warna latar belakang * / margin-kiri: 15px; / * mundur di kiri * / margin-kanan: 120px; / * mundur di kanan * / margin-top: 0,5 em; / * indentasi dari atas * / padding: 5px; / * bidang di sekitar teks * /)
Sekali lagi, menggunakan alat pengeditan Google Chrome, dengan Anda semua telinga Anda (tapi itu sepadan), masukkan tajuk untuk catatan kaki, tidak lupa untuk meletakkannya untuknya oleh kelas put:
Perhatian!
Kemudian tulis teks catatan kaki itu sendiri:
Materi yang disajikan dalam publikasi ini sangat penting dalam hal mempelajari fondasi CSS (tabel gaya cascading)
.Setelah semua televitasi ini, kami mendapatkan paragraf catatan kaki di halaman web (saya mengingatkan Anda bahwa paragraf ini saya masukkan pada akhir artikel saya tentang anak perusahaan dan pemilih kontekstual saya):
Sekarang di blog atau situs saat mengikat "put" ke tag apa pun H3 akan dikenakan catatan kaki seperti pada halaman web. Apalagi didekorasi dengan cara khusus hanya paragraf pertama setelah tag H3 dengan "kelas \u003d" menempatkan "". Tetapi inilah yang kami capai, bukan?
Pada hal ini, izinkan saya menyelesaikan manual hari ini, yang berisi algoritma untuk penggunaan tetangga, serta pemilih universal. Saya harap artikel ini akan memudar Anda, pembaca yang terhormat berlangganan
