Pemilih CSS: Combinator

Takeaways Key

pemilih CSS memadankan peraturan ke elemen, dengan spesifikasi tahap 3 dan tahap 4 pemilih memperkenalkan beberapa pemilih baru. Ini termasuk pemilih atribut baru dan gabungan, dan pelbagai kelas pseudo baru.
Combinator adalah urutan watak yang menyatakan hubungan antara pemilih di kedua -dua belah itu. Mereka termasuk Kombinator Descendant (Whitespace), Combinator Child (>), bersebelahan dengan saudara kandung (), dan kombinasi saudara umum (~).
Kombinator Descendant memilih semua elemen yang keturunan elemen yang ditentukan, kombinator kanak -kanak memilih semua elemen yang merupakan anak langsung dari elemen yang ditentukan, kombinasi saudara bersebelahan memilih semua elemen yang merupakan adik -beradik seterusnya dari elemen yang ditentukan, dan Kombinator saudara umum memilih semua elemen yang adik beradik elemen yang ditentukan.
CSS Combinators boleh digabungkan dengan kelas pseudo dan pemilih atribut, dan mereka boleh digunakan untuk gaya bersarang gaya. Walau bagaimanapun, mereka tidak mempunyai kekhususan sendiri; Mereka hanya membantu menentukan kekhususan pemilih dengan menentukan hubungan antara unsur -unsur.

Peraturan CSS dipadankan dengan elemen dengan pemilih. Terdapat beberapa cara untuk melakukan ini, dan anda mungkin biasa dengan kebanyakan mereka. Jenis elemen, nama kelas, ID, dan pemilih atribut semua pemilih CSS yang disokong dengan baik dan digunakan secara meluas.

Pemilih Tahap 3 dan Tahap 4 Spesifikasi memperkenalkan beberapa pemilih baru. Dalam sesetengah kes, ini adalah variasi baru jenis yang sedia ada. Dalam kes lain, mereka adalah ciri baru bahasa.

Dalam bab ini, kita akan melihat landskap penyemak imbas semasa untuk pemilih CSS, dengan fokus pada pemilih yang lebih baru. Ini termasuk pemilih dan kombinasi atribut baru, dan pelbagai kelas pseudo baru. Dalam bahagian

memilih pemilih dengan bijak , kita melihat konsep kekhususan.

Bab ini berhenti menjadi pandangan yang komprehensif di semua pemilih -yang boleh menjadi buku untuk dirinya sendiri. Sebaliknya, kami akan memberi tumpuan kepada pemilih dengan sokongan penyemak imbas yang baik yang mungkin berguna dalam kerja semasa anda. Sesetengah bahan mungkin topi lama, tetapi ia termasuk untuk konteks.

Petua: Perlindungan penyemak imbas untuk pemilih

Pandangan komprehensif pada keadaan semasa sokongan penyemak imbas untuk pemilih boleh didapati di CSS4-Selectors.

Berikut adalah ekstrak dari buku kami, CSS Master, yang ditulis oleh Tiffany B. Brown. Salinan dijual di kedai -kedai di seluruh dunia, atau anda boleh membelinya dalam bentuk ebook di sini.

Combinator

Combinator adalah urutan watak yang menyatakan hubungan antara pemilih di kedua -dua belah itu. Menggunakan kombinator mencipta apa yang dikenali sebagai pemilih yang kompleks. Pemilih kompleks boleh, dalam beberapa kes, menjadi cara yang paling ringkas untuk menentukan gaya.

Anda harus akrab dengan kebanyakan gabungan ini:

• Gabungan Descendant, atau Whitespace Watak

• Combinator Child, atau>

• Combinator Sibling bersebelahan, atau

• Kombinator saudara umum, atau ~

mari kita menggambarkan setiap gabungan ini. Kami akan menggunakannya untuk menambah gaya ke borang HTML yang ditunjukkan di bawah.

Borang ini dibuat menggunakan bahagian berikut HTML:

<span><span><span><form</span> method<span>="GET"</span> action<span>="/processor"</span>></span>
</span><span><span><span><h1</span>></span>Buy Tickets to the Web Developer Gala<span><span></h1</span>></span>
</span><span><span><span><p</span>></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></p</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Tickets and Add-ons<span><span></legend</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Number of Tickets<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Limit 8<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span><span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Dinner Packages<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Serves 2<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Payment<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="ccn"</span>></span>Credit card number<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="expiration"</span>></span>Expiration date<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span><span><span><abbr</span> title<span>="Two-digit month"</span>></span>MM<span><span></abbr</span>></span>/<span><span><abbr</span> title<span>="Four-digit Year"</span>></span>MM<span><span></abbr</span>></span>YYYY<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Billing Address<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="name"</span>></span>Name<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="street_address"</span>></span>Street Address<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="city"</span>></span>City<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="state"</span>></span>State<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="zip"</span>></span>ZIP<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
</span>	<span><span><span></p</span>></span>
</span><span><span><span></fieldset</span>></span>
</span>
<span><span><span><button</span> type<span>="submit"</span>></span>Buy Tickets!<span><span></button</span>></span>
</span><span><span><span></form</span>></span></span>

Kombinator Descendant

Anda mungkin agak akrab dengan Gabungan Keturunan. Sudah ada sejak hari -hari awal CSS (walaupun ia tanpa nama jenis sehingga CSS2.1). Ia digunakan secara meluas dan disokong secara meluas.

Kombinator Descendant hanyalah watak Whitespace. Ia memisahkan pemilih induk dari keturunannya, mengikuti corak a b , di mana b adalah elemen yang terkandung oleh a . Mari tambahkan beberapa CSS ke markup kami dari atas dan lihat bagaimana ini berfungsi:

<span>form h1 {
</span><span>color: #009;
</span><span>}</span>

kami baru saja mengubah warna tajuk bentuk kami, hasilnya dapat dilihat di bawah.

mari tambah lebih banyak CSS, kali ini untuk meningkatkan saiz mesej harga kami ("Tiket adalah $ 10 setiap satu"):

<span>form p {
</span><span>font-size: 22px;
</span><span>}</span>

Terdapat masalah dengan pemilih ini, bagaimanapun, seperti yang anda lihat di bawah. Kami sebenarnya telah meningkatkan saiz teks dalam semua perenggan bentuk kami, yang bukan apa yang kami mahukan. Bagaimana kita boleh membetulkannya? Mari kita cuba gabungan kanak -kanak.

The Child Combinator

Berbeza dengan penggabungan keturunan, kanak -kanak Combinator (>) hanya memilih kanak -kanak segera unsur. Ia mengikuti corak a> b , yang sepadan dengan mana -mana elemen b di mana a adalah nenek moyang segera.

Jika unsur -unsur adalah orang, untuk menggunakan analogi, gabungan kanak -kanak akan sepadan dengan anak elemen ibu. Tetapi penggabungan keturunan juga akan sepadan dengan cucu-cucunya, dan cucu-cucunya. Mari kita ubah pemilih sebelumnya untuk menggunakan Combinator Kanak -kanak:

<span>form <span>> p</span> {
</span><span>font-size: 22px;
</span><span>}</span>

sekarang hanya kanak -kanak langsung artikel yang terjejas, seperti yang ditunjukkan di bawah.

Gabungan saudara bersebelahan

Dengan gabungan saudara bersebelahan (), kita boleh memilih unsur -unsur yang mengikuti satu sama lain dan mempunyai ibu bapa yang sama. Ia mengikuti corak a b . Gaya akan digunakan untuk unsur -unsur b mari kita kembali kepada contoh kami. Perhatikan bahawa label dan input kami duduk bersebelahan. Ini bermakna kita boleh menggunakan gabungan saudara bersebelahan untuk menjadikannya duduk di garisan berasingan:

<span><span><span><form</span> method<span>="GET"</span> action<span>="/processor"</span>></span>
</span><span><span><span><h1</span>></span>Buy Tickets to the Web Developer Gala<span><span></h1</span>></span>
</span><span><span><span><p</span>></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></p</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Tickets and Add-ons<span><span></legend</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Number of Tickets<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Limit 8<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span><span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Dinner Packages<span><span></label</span>></span> 
</span>		<span><span><span><span</span> class<span>="help"</span>></span>Serves 2<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Payment<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="ccn"</span>></span>Credit card number<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="expiration"</span>></span>Expiration date<span><span></label</span>></span>
</span>		<span><span><span><span</span> class<span>="help"</span>></span><span><span><abbr</span> title<span>="Two-digit month"</span>></span>MM<span><span></abbr</span>></span>/<span><span><abbr</span> title<span>="Four-digit Year"</span>></span>MM<span><span></abbr</span>></span>YYYY<span><span></span</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
<span><span><span></fieldset</span>></span>
</span><span><span><span><fieldset</span>></span>
</span>	<span><span><span><legend</span>></span>Billing Address<span><span></legend</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="name"</span>></span>Name<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
</span>	<span><span><span></p</span>></span>
</span>	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="street_address"</span>></span>Street Address<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="city"</span>></span>City<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="state"</span>></span>State<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
</span>	<span><span><span></p</span>></span>
</span>
	<span><span><span><p</span>></span>
</span>		<span><span><span><label</span> for<span>="zip"</span>></span>ZIP<span><span></label</span>></span>
</span>		<span><span><span><input</span> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
</span>	<span><span><span></p</span>></span>
</span><span><span><span></fieldset</span>></span>
</span>
<span><span><span><button</span> type<span>="submit"</span>></span>Buy Tickets!<span><span></button</span>></span>
</span><span><span><span></form</span>></span></span>

anda dapat melihat hasilnya di bawah.

Mari lihat contoh lain yang menggabungkan pemilih sejagat (*) dengan pemilih jenis:

<span>form h1 {
</span><span>color: #009;
</span><span>}</span>

Contoh ini menambah margin 5EM ke bahagian atas dan bawah setiap elemen medan, ditunjukkan di bawah. Oleh kerana kita menggunakan pemilih sejagat, tidak perlu bimbang sama ada elemen sebelumnya adalah medan lain atau elemen P.

Nota: Lebih banyak kegunaan pemilih saudara bersebelahan

Heydon Pickering meneroka lebih banyak kegunaan pandai pemilih saudara bersebelahan dalam artikelnya "CSS Axiomatic dan Lobotomized Owls."

Bagaimana jika kita mahu gaya elemen saudara yang

tidak bersebelahan dengan yang lain, seperti bilangan medan tiket kita? Dalam kes ini, kita boleh menggunakan gabungan saudara umum.

Kombinator saudara umum

Dengan Kombinator Kombinasi Umum -Tilde -kita boleh memilih unsur -unsur yang berkongsi ibu bapa yang sama tanpa mempertimbangkan sama ada mereka bersebelahan. Memandangkan corak

a ~ b , pemilih ini sepadan dengan semua unsur -unsur b yang didahului oleh elemen a , sama ada atau tidak mereka bersebelahan.

Mari lihat bilangan medan tiket sekali lagi. Markupnya kelihatan seperti ini:

<span>form p {
</span><span>font-size: 22px;
</span><span>}</span>

elemen input kami mengikuti elemen label, tetapi terdapat elemen span di antara. Oleh kerana elemen span terletak di antara input dan label, gabungan saudara bersebelahan akan gagal berfungsi di sini. Mari kita ubah gabungan saudara bersebelahan kita kepada gabungan saudara umum:

<span>form <span>> p</span> {
</span><span>font-size: 22px;
</span><span>}</span>

sekarang semua elemen input kami duduk di garisan berasingan dari elemen label mereka, seperti yang dilihat di bawah.

Menggunakan Gabungan Umum Kombinator adalah yang paling berguna apabila anda tidak mempunyai kawalan penuh ke atas markup. Jika tidak, anda akan lebih baik menyesuaikan markup anda untuk menambah nama kelas. Perlu diingat bahawa gabungan adik -beradik umum boleh membuat beberapa kesan sampingan yang tidak diingini dalam asas kod yang besar, jadi gunakan dengan berhati -hati.

Soalan Lazim (Soalan Lazim) Mengenai Pemilih dan Combinator CSS

Apakah pelbagai jenis kombinasi CSS dan bagaimana ia berfungsi? Terdapat empat jenis gabungan dalam CSS: Kombinator Descendant (ruang), Combinator Kanak -kanak (lebih besar daripada simbol>), bersebelahan bersebelahan dengan kombinasi (plus simbol), dan kombinasi saudara umum (simbol tilde ~). Kombinator keturunan memilih semua elemen yang keturunan elemen yang ditentukan. Kanak -kanak Combinator memilih semua elemen yang merupakan kanak -kanak langsung dari elemen yang ditentukan. Kombinator saudara bersebelahan memilih semua elemen yang merupakan adik -beradik seterusnya dari elemen yang ditentukan. Kombinator adik -beradik umum memilih semua elemen yang adik -beradik elemen yang ditentukan. . Ia digunakan untuk memilih unsur -unsur yang merupakan kanak -kanak langsung dari elemen tertentu. Sebagai contoh, jika anda ingin memilih semua unsur -unsur

yang merupakan anak -anak langsung dari elemen

, anda akan menulisnya sebagai "div> p". Ini akan menggunakan gaya CSS hanya kepada unsur -unsur

yang merupakan anak -anak langsung dari elemen

, bukan kepada mereka yang bersarang lebih dalam. Kombinator keturunan? Seorang kanak -kanak Combinator (>) hanya memilih kanak -kanak langsung dari elemen tertentu, manakala penggabungan keturunan (ruang) memilih semua keturunan (kanak -kanak, cucu, dll) elemen tertentu. Sebagai contoh, "div> p" hanya memilih unsur -unsur

yang merupakan kanak -kanak langsung dari elemen

, manakala "div p" memilih semua unsur

dalam elemen

, tanpa mengira bagaimana sangat bersarang. CSS diwakili oleh simbol "". Ia digunakan untuk memilih elemen yang langsung selepas elemen tertentu, dan kedua -dua elemen berkongsi ibu bapa yang sama. Sebagai contoh, jika anda ingin memilih elemen

yang secara langsung mengikuti elemen

, anda akan menulisnya sebagai "div p". Ini akan menggunakan gaya CSS hanya ke elemen

yang secara langsung mengikuti elemen

. Anda boleh menggabungkan pelbagai kombinasi CSS dalam satu peraturan untuk membuat pemilih yang lebih spesifik dan kompleks. Sebagai contoh, anda boleh menggabungkan penggabungan kanak -kanak dan gabungan saudara bersebelahan untuk memilih elemen yang kedua -duanya adalah anak langsung dan adik bersebelahan unsur -unsur tertentu. Peraturan "div> p p" akan memilih elemen

yang merupakan anak langsung dari elemen

dan juga secara langsung mengikuti elemen

yang lain.

Apakah gabungan saudara umum dalam CSS?

Kombinator saudara umum dalam CSS diwakili oleh simbol "~". Ia digunakan untuk memilih unsur -unsur yang merupakan adik -beradik elemen tertentu. Tidak seperti gabungan saudara bersebelahan, gabungan saudara umum memilih semua elemen yang adik -beradik elemen tertentu, bukan hanya yang secara langsung mengikutinya. Sebagai contoh, "div ~ p" akan memilih semua unsur -unsur

yang adik beradik. > CSS Combinators boleh sangat berguna untuk elemen bersarang gaya. Sebagai contoh, anda boleh menggunakan Gabungan Descendant untuk gaya semua elemen

dalam elemen

dengan menulis "div p". Anda juga boleh menggunakan kombinator kanak -kanak untuk gaya hanya kanak -kanak langsung elemen dengan menulis "div> p". Dengan menggabungkan kombinator yang berbeza, anda boleh membuat pemilih yang sangat spesifik yang menyasarkan dengan tepat unsur-unsur yang anda inginkan. Gunakan kombinasi CSS dengan kelas pseudo. Sebagai contoh, anda boleh menggunakan Gabungan Kanak-kanak dengan: kelas pseudo pertama kanak-kanak untuk memilih anak pertama elemen tertentu. Peraturan "div> p: anak pertama" akan memilih elemen pertama

yang merupakan anak langsung dari elemen

. ? Walau bagaimanapun, mereka membantu menentukan kekhususan pemilih dengan menentukan hubungan antara unsur -unsur. Kekhususan pemilih dikira berdasarkan bilangan pemilih ID, pemilih kelas, dan taipkan pemilih yang terkandung. Pemilih dengan pemilih yang lebih spesifik akan menimpa pemilih dengan pemilih yang kurang spesifik.

Bolehkah saya menggunakan kombinasi CSS dengan pemilih atribut? Sebagai contoh, anda boleh menggunakan Combinator Child dengan pemilih atribut untuk memilih elemen yang mempunyai atribut tertentu dan merupakan anak langsung dari elemen tertentu. Peraturan "div> p [tajuk]" akan memilih semua unsur -unsur

yang mempunyai atribut tajuk dan anak -anak langsung dari elemen

. 3

Atas ialah kandungan terperinci Pemilih CSS: Combinator. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!