Pemilih CSS. jenis pemilih

, setiap yang anda mahu untuk menetapkan warna tertentu. Bagaimana untuk melakukannya? pemilih CSS standard tidak sesuai untuk tag, mereka menunjukkan parameter untuk semua blok sekaligus. penyelesaian adalah mudah. Menyerahhakkan ahli kelas. Sebagai contoh, yang pertama menerima div class =, 'merah' kedua - class = 'biru', ketiga - class = 'hijau'. Kini mereka boleh dipilih menggunakan jadual CSS.

sintaksis adalah seperti berikut: Menunjukkan titik ( "."), Diikuti dengan menulis nama kelas. Untuk menguruskan unit pertama, gunakan pembinaan .red. Kedua - .blue dan sebagainya.

Penting! Ia adalah disyorkan untuk menggunakan nilai yang bermakna atribut kelas. Ia dianggap jelek untuk menggunakan alih huruf (contohnya, krasiviy-blok) atau kombinasi rawak surat / nombor (ojfh834871). Dalam kod ini, anda terikat untuk mendapatkan keliru, apatah lagi kesukaran yang akan menghadapi orang-orang yang akan terlibat dalam projek ini selepas anda. Pilihan terbaik - untuk menggunakan mana-mana kaedah, seperti BEM.

Kelebihan - fleksibiliti agak tinggi.

Kelemahan - yang pelbagai elemen menjadi satu dan kelas yang sama, yang bermaksud bahawa mereka akan diedit secara serentak. Masalah ini diselesaikan dengan menggunakan kaedah dan juga warisan preprocessors. Pastikan anda mendapatkan tangan anda kurang, sass atau beberapa prapemproses lain, mereka sangat memudahkan kerja.

pemilih ID

Mengenai versi ini coders pendapat dan pengaturcara adalah samar-samar. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Beberapa tutorial CSS tidak mengesyorkan penggunaan ID, kerana dalam permohonan tidak tepat ia boleh menyebabkan masalah dengan warisan. Walau bagaimanapun, ramai pakar secara aktif menguruskan mereka sepanjang susun atur. Anda membuat keputusan. # »), затем имя блока. sintaksis adalah seperti berikut: tanda pound ( "#"), kemudian nama blok. #red. Sebagai contoh, #red.

отличается от класса по нескольким параметрам. ID adalah berbeza dari kelas dalam beberapa cara. ID. Pertama, halaman yang tidak boleh dua ID yang sama. Mereka ditugaskan nama yang unik. Kedua, seperti pemilih yang mempunyai keutamaan yang lebih tinggi. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Ini bermakna bahawa jika anda menentukan kelas unit merah dan nyatakan dalam jadual CSS merah warna latar belakang, dan kemudian memberikan kepadanya id yang sama biru dan menentukan warna biru, unit ini akan bertukar menjadi biru.

Kelebihan - anda boleh mengawal elemen tertentu, mengabaikan gaya tag dan kelas.

ID и class. Kelemahan - mudah untuk mendapatkan hilang dalam sebilangan besar ID dan kelas.

Penting! ID вам, в общем-то, не нужны. Jika anda menggunakan kaedah BEM (atau analognya), ID kepada anda, secara umum, tidak diperlukan. Teknik ini melibatkan penggunaan jenis yang susun atur yang lebih mudah.

pemilih universal

{}. Syntax: Starlets tanda ( "*") dan pendakap, iaitu, {*} ...

Digunakan untuk menetapkan sifat-sifat tertentu apabila semua elemen halaman. Apabila ini berguna? box-sizing: border-box. Sebagai contoh, jika anda mahu untuk menetapkan halaman sifat box-saiz: sempadan-kotak. div *{}. Bukan sahaja boleh digunakan untuk menguruskan semua komponen dokumen itu, tetapi juga untuk mengawal semua orang blok yang dinyatakan, sebagai contoh, div * {}.

Kelebihan - anda boleh mengawal jumlah besar barangan pada satu masa.

Cons - pilihan fleksibel tidak mencukupi. Di samping itu, penggunaan pemilih ini, dalam beberapa kes melambatkan kerja halaman.

dengan sifat-sifat

Membuat ia mungkin untuk mengawal elemen dengan sifat tertentu. Sebagai contoh, anda mempunyai beberapa tag input dengan jenis sifat yang berbeza. Salah seorang daripada mereka - teks, yang kedua - kata, ketiga - nombor. Sudah tentu, anda boleh menetapkan setiap kelas atau ID, tetapi ia tidak selalunya mudah. pemilih CSS sifat-sifat membuat ia mungkin untuk menentukan nilai-nilai untuk tag tertentu dengan ketepatan maksimum. Sebagai contoh, seperti ini:

input [ 'teks' type =] {}

pemilih ini akan memilih semua sifat-sifat dengan jenis teks input.

Alat ini adalah agak fleksibel dan boleh digunakan dengan mana-mana tag, di mana mungkin ada sifat-sifat. Tetapi itu bukan semua! Spesifikasi CSS mempunyai keupayaan untuk mengawal unsur-unsur dengan kemudahan lebih!

Bayangkan bahawa laman anda mempunyai input dengan pemegang tempat atribut = "Masukkan nama" dan input pemegang tempat = "Masukkan kata laluan". Mereka juga boleh dipilih menggunakan pemilih! Untuk melakukan ini, menggunakan struktur berikut:

input [pemegang tempat = "Masukkan nama"] {} atau input [pemegang tempat = "Masukkan kata laluan"]

Mungkin kerja yang lebih fleksibel dengan sifat-sifat. Katakan anda mempunyai beberapa tag dengan sama atribut tajuk (contohnya, "Caspian" dan "Caspian"). Untuk memilih kedua-duanya, menggunakan pilihan berikut:

[Tajuk * = "Kaspiysk"]

CSS akan memilih semua item dalam tajuk di mana terdapat simbol-simbol "Caspian", iaitu. E., Dan "Caspian" dan "Caspian".

Anda juga boleh memilih tag yang bermula dengan sifat-sifat watak tertentu:

[Tajuk ^ = "aksara yang anda mahu"] {}

atau menamatkan mereka:

[$ Title = "watak betul"] {}.

Kelebihan - fleksibiliti maksimum. Anda boleh memilih mana-mana elemen halaman sedia ada tanpa kerunsingan dengan kelas.

Kelemahan - digunakan agak jarang, hanya dalam kes-kes tertentu. Ramai pereka web lebih suka metodologi, sejak kelas persoalannya adalah lebih mudah daripada untuk mengatur pelbagai kurungan persegi dan tanda-tanda "sama". Di samping itu, pemilih ini tidak berfungsi dalam Internet versi Explorer 7 dan ke bawah. Walau bagaimanapun, yang kini memerlukan Internet Explorer lama?

pemilih pseudo-kelas

Menandakan elemen pseudo-status. Sebagai contoh ,: hover - apa yang berlaku kepada sebahagian daripada halaman apabila anda berlegar ,: dilawati - link yang dilawati. Ia juga termasuk unsur-unsur seperti: pertama-anak dan: last-kanak-kanak.

Ini jenis pemilih secara aktif digunakan dalam susun atur moden, kerana terima kasih kepada itu anda boleh membuat halaman "hidup" tanpa menggunakan JavaScript. Sebagai contoh, anda ingin memastikan bahawa apabila anda berlegar atas butang dengan kelas btn warnanya berubah. Untuk melakukan ini, kita menggunakan struktur berikut:

.btn: hover {

background-color: red;

}

Kecantikan boleh dinyatakan dalam sifat-sifat asas butang, harta peralihan, sebagai contoh, 0.5s - dalam kes ini, butang akan tidak merah serta-merta, dan dalam masa setengah saat.

Fadhilat - digunakan secara meluas untuk "kebangkitan" halaman. Mudah untuk digunakan.

Kelemahan - mereka tidak. Ini adalah alat yang benar-benar berguna. Walau bagaimanapun, pereka web berpengalaman boleh hilang dalam banyak pseudo-kelas. masalah itu tidak diselesaikan kajian dan amalan.

pseudo-pemilih

"Pseudo" - ini adalah sebahagian daripada halaman yang bukan dalam HTML, tetapi mereka masih boleh diuruskan. Anda tidak faham? Ia lebih mudah daripada ia kelihatan. Sebagai contoh, anda ingin huruf pertama dalam rentetan besar dan merah, meninggalkan teks kecil dan hitam yang lain. Sudah tentu, ia boleh membuat kesimpulan bahawa surat dalam tempoh dengan kelas tertentu, tetapi ia panjang dan membosankan. Ia adalah lebih mudah untuk memilih keseluruhan perenggan dan menggunakan pseudo :: pertama huruf. Ia memberi peluang untuk mengawal rupa huruf pertama.

Terdapat sebilangan besar pseudo-unsur. Senaraikan dalam artikel tunggal tidak mungkin berjaya. Anda boleh mendapatkan maklumat yang berkenaan dalam enjin carian kegemaran anda.

Kelebihan - menyediakan fleksibiliti untuk menyesuaikan rupa halaman.

Kelemahan - baru kepada mereka sering keliru. Banyak pilihan jenis ini kerja hanya dalam pelayar tertentu.

untuk meringkaskan

Pemilih - alat yang berkuasa untuk kawalan aliran dokumen. Terima kasih kepada beliau, anda boleh memilih setiap komponen tunggal halaman (bahkan ada hanya sebahagiannya). Pastikan anda belajar semua pilihan yang ada, atau menulis mereka ke bawah. Ini adalah penting jika anda membuat laman kompleks dengan reka bentuk yang moden dan banyak unsur-unsur interaktif.