Pemilih hubungan dan atribut dalam CSS3

Berikut adalah dikutip dari buku "HTML5 & CSS3 untuk dunia nyata, edisi ke-2" yang dikarang oleh Alexis Goldstein, Louis Lazaris dan Estelle Weyl. Buku ini boleh didapati di kedai-kedai di seluruh dunia, dan anda juga boleh membeli versi e-book di sini.

mata teras

Pemilih CSS3 membolehkan kedudukan elemen yang tepat pada halaman web, memperluaskan keupayaan versi CSS sebelumnya. Pemilih relasi dan pemilih atribut adalah ciri utama CSS3.
Pemilih Hubungan Menempatkan unsur -unsur berdasarkan hubungan mereka dalam tag. Ini termasuk penggabungan keturunan (e f), subcombinator (e & gt; f), pemilih saudara bersebelahan atau pemilih adik beradik seterusnya (E F), dan pemilih saudara sejagat atau pemilih saudara berikutnya (E ~ F).
Pemilih atribut dalam CSS3 membolehkan padanan berdasarkan atribut elemen, dan CSS3 memanjangkan pemilih atribut CSS2 dengan membenarkan corak sepadan. Ini termasuk e [attr], e [attr = val], e [attr | = val], e [attr ~ = val], e [attr^= val], e [attr $ = val], dan e [attr * = val].
Semua pelayar moden menyokong pemilih CSS3, termasuk IE9 dan kemudian. Menggunakan pemilih ini dapat meningkatkan kecekapan dan keberkesanan reka bentuk dan pembangunan web.

pemilih CSS3

pemilih CSS adalah teras CSS. Sekiranya tidak ada pemilih untuk mencari unsur -unsur di halaman, satu -satunya cara untuk mengubah suai atribut CSS elemen adalah dengan menggunakan atribut gaya elemen dan mengisytiharkan gaya sebaris, yang kedua -duanya canggung dan sukar untuk dikekalkan. Jadi kami menggunakan pemilih. Pada mulanya, CSS membolehkan elemen yang sepadan mengikut jenis, kelas, dan/atau ID. Ini memerlukan menambah atribut kelas dan ID ke tag kami untuk membuat cangkuk dan membezakan unsur -unsur jenis yang sama. CSS2.1 menambah elemen pseudo, kelas pseudo, dan gabungan. Dengan CSS3, kita boleh menggunakan pelbagai pemilih untuk mencari hampir mana -mana elemen pada halaman.

Dalam keterangan di bawah, kami akan memasukkan pemilih yang diberikan kepada kami dalam versi CSS yang terdahulu. Mereka disertakan kerana walaupun kita boleh menggunakan pemilih CSS3, pemilih lebih awal daripada CSS3 juga merupakan sebahagian daripada spesifikasi CSS Selector Level 3 dan masih disokong kerana CSS Selector Level 3 memanjangkannya. Malah untuk pemilih yang telah lama wujud, ia patut dikaji semula di sini, kerana terdapat beberapa permata tersembunyi yang kurang dikenali dalam spesifikasi lama. Sila ambil perhatian bahawa semua pelayar moden, termasuk IE9 dan kemudian, menyokong semua pemilih CSS3.

Pemilih Hubungan

Pemilih Hubungan Menempatkan unsur -unsur berdasarkan hubungan mereka dalam tag. Semua ini disokong bermula dengan IE7 dan dalam semua pelayar utama lain:

Descendant Combinator (e f)

anda pasti sudah biasa dengan ini. Pemilih Keturunan mengesan mana-mana elemen F yang keturunan elemen E (elemen kanak-kanak, elemen cucu, elemen cucu, dll.). Sebagai contoh, Ol Li menempatkan elemen li yang terletak dalam senarai yang diperintahkan. Ini termasuk elemen LI bersarang di UL di OL, yang mungkin bukan apa yang anda mahukan.

subcombinator (e & gt; f)

pemilih ini sepadan dengan mana -mana elemen f sebagai elemen kanak -kanak langsung elemen e - sebarang elemen bersarang selanjutnya akan diabaikan. Meneruskan dengan contoh di atas, OL & GT;

pemilih saudara jiran atau pemilih abang seterusnya (e f)

Ini akan sepadan dengan mana -mana elemen F yang berkongsi elemen induk yang sama seperti E dan terus di belakang dalam tag. Sebagai contoh, li li akan mencari semua elemen li dalam bekas yang diberikan, kecuali elemen li pertama.

pemilih saudara sejagat atau pemilih saudara berikutnya (e ~ f)

Ini agak rumit. Ia akan sepadan dengan mana -mana elemen F yang berkongsi elemen induk yang sama seperti E dan berada di belakangnya dalam tag. Oleh itu, H1 ~ H2 akan sepadan dengan mana -mana H2 yang terletak selepas H1, selagi mereka semua berkongsi elemen induk langsung yang sama -iaitu, selagi H2 tidak bersarang dalam unsur lain.

mari kita lihat contoh mudah:

<header>
  <h1 id="Main-title">Main title</h1>
  <h2 id="This-subtitle-is-matched">This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2 id="This-is-not-matched-by-h-h-but-is-by-header-h">This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

Strings Selector H1 ~ H2 akan sepadan dengan H2 pertama, kerana H1 dan H2 adalah kedua -dua anak pengepala atau keturunan langsung. H2 seterusnya yang akan anda lihat dalam coretan kod tidak sepadan kerana elemen induknya adalah artikel, bukan tajuk. Walau bagaimanapun, ia akan sepadan dengan header ~ H2. Begitu juga, H2 ~ p hanya sepadan dengan perenggan terakhir, kerana perenggan pertama adalah sebelum H2 ia berkongsi dengan artikel Elemen Ibu Bapa.

NOTA: Kenapa tidak ada pemilih "ibu bapa"?

Anda akan melihat bahawa setakat ini tidak ada pemilih "bapa" atau "nenek moyang", atau pemilih "pra-saudara". Prestasi penyemak imbas yang perlu melintasi pokok Dom ke belakang atau rekursif ke unsur bersarang sebelum memutuskan sama ada untuk menggunakan gaya, menghalang keupayaan untuk memiliki "Traverse the Dom Tree ke atas" pemilih.

jQuery mengandungi: mempunyai () sebagai pemilih nenek moyang. Pemilih ini sedang dipertimbangkan untuk CSS Selector Level 4, tetapi belum dilaksanakan dalam mana -mana pelayar. Jika dan bila ia dilaksanakan, kami akan dapat menggunakan E: mempunyai (f) untuk mencari e dengan f sebagai keturunan, e: mempunyai (& gt; f) untuk mencari e dengan f sebagai elemen kanak -kanak langsung, e: mempunyai (f ) untuk mencari e secara langsung sebelum Brother F, dan serupa.

Semak imbas helaian gaya HTML5 Herald dan anda akan melihat bahawa kami menggunakan pemilih ini di banyak tempat. Sebagai contoh, apabila menentukan susun atur keseluruhan laman web ini, kami mahu divs tiga lajur untuk terapung ke kiri. Untuk mengelakkan menggunakan gaya ini ke mana-mana div lain yang bersarang di dalamnya, kami menggunakan sub-selektor:

main > div {
  float: left;
  overflow: hidden;
}

Semasa kami menambah gaya baru ke laman web ini dalam beberapa bab berikutnya, anda akan melihat banyak jenis pemilih ini.

Pemilih atribut

CSS2 memperkenalkan beberapa pemilih harta. Ini membolehkan padanan berdasarkan atribut elemen. CSS3 memanjangkan pemilih harta ini untuk membolehkan beberapa kedudukan berdasarkan padanan corak. CSS Selector Level 4 telah menambah lebih banyak lagi:

e [attr] sepadan dengan mana -mana elemen E dengan atribut attr tanpa mengira nilai atribut. Kami menggunakannya dalam Bab 4 untuk gaya input yang diperlukan;

e [attr = val] sepadan dengan mana -mana elemen E dengan atribut attr dan nilainya adalah val. Walaupun tidak baru, ia berguna apabila mencari jenis input borang;

e [attr | = val] sepadan dengan mana-mana elemen yang atributnya attr mempunyai nilai val atau bermula dengan val-. Ini paling biasa digunakan dalam atribut Lang. Sebagai contoh, p [lang | = "en"] akan memadankan mana -mana perenggan yang ditakrifkan dalam bahasa Inggeris, sama ada dalam bahasa Inggeris Inggeris atau Amerika, menggunakan

atau

.

e [attr ~ = val] sepadan dengan mana -mana elemen yang atribut Attr mengandungi perkataan penuh val (disertakan dengan ruang). Sebagai contoh, .Info [Title ~ = More] akan memadankan mana -mana elemen dengan maklumat kelas dan atribut tajuk mengandungi perkataan "lebih", seperti "klik di sini untuk mengetahui lebih lanjut".

e [attr^= val] sepadan dengan mana -mana elemen yang atributnya attr bermula dengan nilai val. Dalam erti kata lain, Val sepadan dengan permulaan nilai harta.

e [attr $ = val] sepadan dengan mana -mana elemen yang atributnya attr berakhir dengan . Dalam erti kata lain, Val sepadan dengan akhir nilai harta.

e [attr = val] sepadan dengan mana -mana elemen yang atribut ATTR sepadan dengan val pada mana -mana kedudukan. Ia sama dengan E [attr ~ = val], kecuali bahawa val boleh menjadi sebahagian daripada perkataan. Menggunakan contoh yang sama seperti sebelumnya, .fakelink [Title = info] {} akan sepadan dengan elemen dengan kelas Fakelink dan atribut tajuk mengandungi maklumat rentetan, seperti "Klik di sini untuk mengetahui lebih lanjut".

Dalam pemilih hartanah ini, nilai VAL adalah sensitif kes untuk nilai sensitif kes dalam HTML. Sebagai contoh, input [class^= "btn"] adalah sensitif kes kerana nama kelas adalah sensitif kes, tetapi input [type = "ceckbox"] adalah sensitif kes kerana nilai jenis tidak sensitif dalam html.

Jika nilai adalah alfanumerik, nilai tidak diperlukan, tetapi terdapat beberapa pengecualian. Rentetan kosong, rentetan bermula dengan nombor, dua tanda hubung dan kes -kes khas lain perlu disertakan dalam petikan. Oleh kerana terdapat pengecualian, adalah idea yang baik untuk membangunkan tabiat selalu termasuk petikan untuk situasi di mana petikan diperlukan.

Dalam tahap pemilih CSS 4, kita dapat mencapai kes-kesaksian kes dengan memasukkan saya sebelum pendakap akhir, e [attr*= val i].

FAQs mengenai pemilih relasi dan pemilih atribut dalam CSS3

Apakah perbezaan antara pemilih hubungan dan pemilih harta dalam CSS3?

Pemilih Hubungan dalam CSS3 digunakan untuk memilih elemen berdasarkan hubungan mereka dengan unsur -unsur lain dalam dokumen HTML. Sebagai contoh, elemen kanak -kanak, keturunan, saudara jiran, dan pemilih saudara sejagat adalah semua jenis pemilih relasi. Sebaliknya, pemilih atribut digunakan untuk memilih elemen berdasarkan atribut atau nilai atributnya. Sebagai contoh, anda boleh menggunakan pemilih harta untuk memilih semua elemen input dengan atribut jenis "teks".

Bagaimana menggunakan subcombinator dalam CSS3?

Subcombinator dalam CSS3 diwakili oleh simbol "& gt;" Ia digunakan untuk memilih elemen kanak -kanak langsung dari elemen tertentu. Sebagai contoh, jika anda ingin memilih semua elemen div kanak -kanak langsung elemen induk dengan kelas "ibu bapa", anda harus menulis CSS berikut:

.parent > div { /* CSS 属性在此处 */ }

Bolehkah saya menggunakan pemilih pelbagai harta dalam CSS3?

Ya, anda boleh menggunakan pemilih harta pelbagai dalam CSS3. Ini membolehkan anda memilih elemen yang memenuhi pelbagai syarat atribut. Sebagai contoh, jika anda ingin memilih semua elemen input dengan atribut jenis "teks" dan nama atribut "Nama Pengguna", anda harus menulis CSS berikut:

input[type="text"][name="username"] { /* CSS 属性在此处 */ }

Apakah tujuan Combinator Brother yang bersebelahan di CSS3?

Combiner Brother bersebelahan di CSS3 diwakili oleh simbol "". Ia digunakan untuk memilih unsur -unsur yang berada di belakang elemen tertentu, dan kedua -dua elemen berkongsi elemen induk yang sama. Sebagai contoh, jika anda ingin memilih elemen Div yang berada di belakang elemen P, anda harus menulis CSS berikut:

p div { /* CSS 属性在此处 */ } Bagaimana untuk memilih elemen dengan nilai atribut tertentu dalam CSS3?

Untuk memilih elemen dengan nilai atribut tertentu dalam CSS3, gunakan pemilih atribut, nama atribut, dan nilai dengan kurungan persegi. Sebagai contoh, jika anda ingin memilih semua elemen input dengan atribut jenis "teks", anda harus menulis CSS berikut:

Bolehkah saya menggabungkan pemilih hubungan dan pemilih atribut dalam CSS3? input[type="text"] { /* CSS 属性在此处 */ }

Ya, anda boleh menggabungkan pemilih hubungan dan pemilih atribut dalam CSS3. Ini membolehkan anda memilih elemen berdasarkan hubungan mereka dengan unsur -unsur lain dan sifat mereka. Sebagai contoh, jika anda ingin memilih semua elemen input kanak -kanak langsung elemen borang dengan "borang" kelas, di mana atribut jenis elemen input adalah "teks", anda harus menulis CSS berikut:

Apakah Universal Brother Combinator di CSS3?

form.form > input[type="text"] { /* CSS 属性在此处 */ }

Combiner saudara sejagat dalam CSS3 diwakili oleh simbol "~". Ia digunakan untuk memilih unsur -unsur saudara elemen tertentu, tanpa mengira pesanan mereka dalam dokumen HTML. Sebagai contoh, jika anda ingin memilih semua elemen div saudara elemen P, anda harus menulis CSS berikut:

Bagaimana untuk memilih elemen dalam CSS3 yang tidak mempunyai atribut tertentu?

p ~ div { /* CSS 属性在此处 */ } Untuk memilih unsur-unsur yang tidak mempunyai atribut khusus dalam CSS3, gunakan: tidak () kelas pseudo dengan pemilih atribut. Sebagai contoh, jika anda ingin memilih semua elemen input yang atribut jenisnya tidak "hantar", anda harus menulis CSS berikut:

Bolehkah saya menggunakan pemilih hubungan dalam css3 dengan kelas pseudo?

Ya, anda boleh menggunakan pemilih hubungan dalam CSS3 dengan kelas pseudo. Ini membolehkan anda memilih elemen berdasarkan hubungan mereka dengan unsur -unsur lain dan keadaan mereka. Sebagai contoh, jika anda ingin memilih semua kanak -kanak langsung elemen elemen navigasi yang sedang berlegar, anda harus menulis CSS berikut:

nav > a:hover { /* CSS 属性在此处 */ }

Bagaimana untuk memilih elemen dalam CSS3 yang mengandungi atribut khusus dengan nilai tertentu?

Untuk memilih elemen yang mengandungi atribut khusus dengan nilai tertentu dalam CSS3, gunakan pemilih harta tanah yang ditunggang persegi, nama dan nilai atribut, dan pengendali *=. Sebagai contoh, jika anda ingin memilih semua elemen dengan atribut HREF yang mengandungi "contoh", anda harus menulis CSS berikut:

Atas ialah kandungan terperinci Pemilih hubungan dan atribut dalam CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!