亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

:first-child Tujuan pemilih adalah, seperti namanya, untuk memilih teg anak pertama bagi teg induk. Jadi contoh ini berkesan (baru mencuba di sini):

    
first
    
second

Walau bagaimanapun, kaedah ini tidak berfungsi jika anda meletakkan teg di bawah teg induk yang berbeza, atau teg kelas red anda bukan teg pertama di bawah teg induk.

Juga ambil perhatian bahawa ini bukan sahaja terpakai pada teg pertama sedemikian dalam keseluruhan dokumen, tetapi juga setiap kali terdapat teg induk baharu mengelilinginya, contohnya:

    
first
    
second


    
third
    
fourth

first 和 third akan menjadi merah.

Untuk kes anda, anda boleh menggunakan :nth-of-type pemilih:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

    blah
    
first
    
second
    
third
    
fourth

Ini adalah salah faham penulis bahawa :first-child 如何工作的最著名的例子之一。 CSS2中引入，:first-childpseudo-class mewakili anak pertama ibu bapanya. Itu sahaja. Terdapat salah tanggapan yang sangat umum bahawa ia memilih elemen anak pertama yang sepadan dengan kriteria yang ditentukan oleh seluruh pemilih kompaun. Disebabkan cara pemilih berfungsi (lihat di sini untuk penjelasan), ini adalah tidak benar.

Pemilih tahap 3 memperkenalkan :first-of-type pseudo-class:first-of- type 偽類，表示其元素類型的兄弟元素中的第一個(gè)元素。 這個(gè)答案圖文并茂地解釋了 :first-child 和 :first-of-type 之間的區(qū)別。但是，與 :first-child 一樣，它不會(huì)查看任何其他條件或?qū)傩?。?HTML 中，元素類型由標(biāo)簽名稱表示。在問(wèn)題中，該類型是 p, yang mewakili elemen pertama dalam kalangan adik-beradik jenis elemennya. Jawapan ini dijelaskan dengan gambar dan teks Perbezaan antara :first-child dan :first-of-type. Walau bagaimanapun, seperti :first-child, ia tidak melihat sebarang syarat atau sifat lain. Dalam HTML, jenis elemen diwakili oleh nama tag. Dalam soalan, jenisnya ialah p.

Malangnya, tiada kelas pseudo :first-of-class yang serupa untuk memadankan elemen anak pertama bagi kelas tertentu. Apabila jawapan ini mula-mula disiarkan, pemilih FPWD tahap 4 yang baru dikeluarkan memperkenalkan :nth-match() pseudo-class :first-of-class 偽類來(lái)匹配給定類的第一個(gè)子元素。在首次發(fā)布此答案時(shí)，新發(fā)布的 FPWD選擇器級(jí)別 4 引入了 :nth-match() 偽類，它是圍繞現(xiàn)有選擇器機(jī)制設(shè)計(jì)的，正如我在第一段中提到的，通過(guò)添加選擇器列表參數(shù)，您可以通過(guò)它提供其余的選擇器復(fù)合選擇器以獲得所需的過(guò)濾行為。近年來(lái)，此功能納入 :nth-child( ) 本身，選擇器列表作為可選的第二個(gè)參數(shù)出現(xiàn)，以簡(jiǎn)化事情并避免 :nth-match(), yang direka bentuk di sekitar mekanisme pemilih sedia ada, dan seperti yang saya nyatakan dalam perenggan pertama, dengan menambah parameter senarai pemilih, anda Ia adalah mungkin untuk menyediakan selebihnya pemilih kompaun pemilih untuk mendapatkan gelagat penapisan yang diingini. Dalam beberapa tahun kebelakangan ini, ciri ini telah digabungkan ke dalam : nth-child( ) sendiri

Sementara kami menunggu sokongan merentas pelayar (serius, sudah hampir 10 tahun dan hanya ada satu pelaksanaan dalam 5 yang lalu), berikut ialah penyelesaian Lea Verou dan saya membangunkan secara bebas (dia Perkara pertama yang perlu dilakukan! ) adalah untuk menerapkan gaya yang anda mahukan pada semua ??elemen kelas itu:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

...dan kemudian gunakan gantikan penggabung saudara generik dalam peraturan ~:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Kini hanya elemen pertama dengan class="red" akan mempunyai sempadan.

Berikut adalah arahan tentang cara menggunakan peraturan:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

  blah         
  
first
  
  
second
 
  
third
  
  
fourth