Terdapat beberapa pemilih terbitan dalam css

Terdapat tiga jenis pemilih terbitan dalam CSS: 1. Pemilih turunan, sintaks "E F{kod gaya}" 2. Pemilih elemen anak, sintaks "E > F {kod gaya}"; Pemilih adik beradik bersebelahan, sintaks "E F {style code}".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pemilih terbitan CSS (pemilih konteks)

Pemilih ialah bahagian pengetahuan yang sangat penting dalam CSS.

Menurut pemahaman ringkas saya, CSS adalah untuk menggunakan pelbagai gaya pada elemen dalam kod HTML.

Jadi, langkah pertama ialah mencari dengan tepat elemen yang ingin anda gayakan.

CSS menggunakan pelbagai pemilih untuk mencari elemen. Terdapat banyak jenis pemilih dalam CSS Hari ini saya hanya ingin bercakap tentang "pemilih terbitan".

Apabila saya mendengar nama "pemilih terbitan", saya benar-benar tidak dapat memahami jenis pemilih itu. Pada pandangan pertama, nama Inggeris ialah "pemilih kontekstual". Walaupun nama itu tidak elegan, saya lebih suka nama ini.

pemilih kontekstual mentakrifkan gaya berdasarkan hubungan kontekstual elemen pada kedudukannya.

Terdapat tiga jenis pemilih konteks: pemilih keturunan, pemilih elemen anak dan pemilih adik beradik bersebelahan.

pemilih keturunan

cth:

Kod HTML:

    <h1>This is a<em>important</em>heading</h1>

Kod CSS:

    h1 em {color:red;}

Peraturan sintaks ialah terdapat ruang antara h1 dan em. Kemudian kod CSS ini akan digunakan pada semua teg

Perkara penting tentang pemilih keturunan ialah bilangan generasi antara parameter pertama dan parameter kedua boleh menjadi tidak terhingga.

cth:

Kod HTML:

<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>

Kod CSS:

ul em{color:red;}

Gaya css di atas akan digunakan pada dua elemen oren dalam kod HTML.

pemilih kanak-kanak

Pemilih anak hanya akan memilih elemen anak unsur tertentu dan tidak akan berkembang kepada mana-mana unsur keturunan.

cth:

Kod HTML:

<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>

Kod CSS:

h1 > strong {color:red;}

Peraturan tatabahasa ialah akan ada simbol ">" antara h1 dan kuat. Ruang antara ">" ini dan h1 sebelumnya atau yang berikut adalah pilihan.

Dalam contoh di atas, dalam baris pertama kod HTML, elemen ialah elemen anak

dan semua pemilih h1 >

Dalam baris kedua kod HTML, bukan elemen anak

, tetapi cucu kepada

, jadi pemilih kuat h1 tidak akan memilihnya.

Pemilih adik beradik bersebelahan

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 

eg：

HTML代码：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<p> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</p>

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Terdapat beberapa pemilih terbitan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!