Pemilih CSS: dapatkan elemen pertama dengan kelas yang ditentukan

Question

Saya mempunyai sekumpulan elemen pertama dengan nama kelas red 的元素，但我似乎无法使用以下 CSS 规则选择带有 class="red":

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Apakah yang salah dengan pemilih ini dan bagaimana saya boleh membetulkannya untuk menyasarkan anak pertama dengan red kelas?

Answer 1

: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

Terima kasih kepada Martyn, yang memadamkan jawapan yang mengandungi kaedah ini.

Untuk maklumat lanjut tentang :nth-child() 和 :nth-of-type() sila lawati http://www.quirksmode.org/css/nthchild.html.

Sila ambil perhatian bahawa ini ialah pemilih CSS3, jadi sesetengah versi penyemak imbas yang kini lapuk mungkin tidak berfungsi seperti yang diharapkan (cth. IE8 atau lebih awal). Lawati https://caniuse.com/?search=nth-of-type untuk butiran lanjut.

Answer 2

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 伪类，表示其元素类型的兄弟元素中的第一个元素。 这个答案图文并茂地解释了 :first-child 和 :first-of-type 之间的区别。但是，与 :first-child 一样，它不会查看任何其他条件或属性。在 HTML 中，元素类型由标签名称表示。在问题中，该类型是 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 伪类来匹配给定类的第一个子元素。在首次发布此答案时，新发布的 FPWD选择器级别 4 引入了 :nth-match() 伪类，它是围绕现有选择器机制设计的，正如我在第一段中提到的，通过添加选择器列表参数，您可以通过它提供其余的选择器复合选择器以获得所需的过滤行为。近年来，此功能纳入 :nth-child( ) 本身，选择器列表作为可选的第二个参数出现，以简化事情并避免 :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

, senarai pemilih muncul sebagai hujah kedua pilihan untuk memudahkan perkara dan mengelakkan tanggapan palsu yang :nth-match() sepadan dengan keseluruhan dokumen (lihat Nota terakhir di bawah) .

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