Pertanyaan Cara memilih banyak orangtua CSS dan kelompok keturunan secara efisien


Adakah cara yang lebih efisien untuk memilih banyak orang tua dan kelompok keturunan?

Apa yang saya miliki sekarang:

aside p, aside h1, aside h2, aside h3, aside h4, 
article p, article h1, article h2, article h3, article h4,
section p, section h1, section h2, section h3, section h4  {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

4
2018-02-18 23:16


asal


Jawaban:


Selektor yang paling berkinerja baik, ringkas, dan spesifik adalah:

.selector {
    width: 75%;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
}

itu bisa beralasan bahwa itu akan mencemari markup Anda tetapi dalam hal murni dari kinerja css ini dia.

berkaitan dengan * pemilih, kinerjanya buruk dan menambahkan pemilih induk TIDAK akan memperbaiki situasi, seperti diilustrasikan di sini

Sistem gaya mencocokkan aturan dengan memulai dengan pemilih kunci, lalu bergerak ke kiri (mencari nenek moyang apa pun di pemilih aturan). Selama subtree pemilih terus diperiksa, sistem gaya terus bergerak ke kiri hingga sesuai dengan aturan, atau diabaikan karena ketidakcocokan.

satu pernyataan terakhir, aside, article, section tidak didukung di IE <8 sehingga gaya apapun tidak akan diambil oleh browser tersebut (kecuali polyfill digunakan tetapi itu adalah cara JS saja)


1
2018-02-19 00:10



Anda dapat menghapus semua spesifikasi tag.

p, h1, h2, h3, h4 {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

1
2018-02-18 23:19



Menggunakan CSS murni, cara Anda saat ini mungkin merupakan cara yang paling efisien, selain menetapkan kelas pada semua tag h.

Menggunakan KURANG, Anda dapat melakukan sesuatu seperti ini:

aside, article, section {
  h1, h2, h3, h4 { ... }
}

1
2018-02-18 23:21



jika hanya ada (p, h1-h4) pada orang tua Anda dapat melakukannya:

aside > *, article > *, section > * {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

itu hanya akan mempengaruhi anak-anak langsung.


1
2018-02-18 23:21