Saya ingin menargetkan semua tag h pada halaman. Saya tahu Anda bisa melakukannya dengan cara ini ...

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

tetapi apakah ada cara yang lebih efisien untuk melakukan ini menggunakan penyeleksi CSS tingkat lanjut? misalnya sesuatu seperti:

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

(tapi jelas ini tidak berhasil)

Tidak, daftar yang dipisahkan koma adalah yang Anda inginkan dalam kasus ini.

Ini bukan css dasar, tetapi jika Anda menggunakan KURANG ( http://lesscss.org ), Anda dapat melakukan ini menggunakan rekursi:

.hClass (@index) when (@index > 0) {
    h@{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Sass ( http://sass-lang.com ) akan memungkinkan Anda untuk mengelola ini, tetapi tidak akan mengizinkan rekursi; mereka memiliki @forsintaks untuk instance ini:

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

Jika Anda tidak menggunakan bahasa dinamis yang mengkompilasi ke CSS seperti KURANG atau Sass, Anda harus memeriksa salah satu opsi ini. Mereka benar-benar dapat menyederhanakan dan membuat pengembangan CSS Anda lebih dinamis.

Jika Anda menggunakan SASS, Anda juga dapat menggunakan mixin ini:

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

Gunakan seperti ini:

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

Sunting: Cara favorit pribadi saya untuk melakukan ini dengan secara opsional memperluas pemilih placeholder pada setiap elemen heading.

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

Lalu saya dapat menargetkan semua pos seperti saya akan menargetkan satu kelas, misalnya:

.element > %headings {
    color: red;
}

SCSS + Compass membuat ini mudah, karena kita berbicara tentang pra-prosesor.

#{headings(1,5)} {
    //definitions
  }

Anda dapat mempelajari tentang semua penyeleksi pembantu Kompas di sini :

Stylus 's pemilih interpolasi

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;

Pemilih jQuery untuk semua tag h (h1, h2 dll) adalah ": header". Misalnya, jika Anda ingin membuat semua tag h berwarna dengan jQuery, gunakan:

$(':header').css("color","red")

Untuk mengatasinya dengan vanilla CSS, cari pola di leluhur h1..h6elemen:

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

Jika Anda dapat menemukan pola, Anda mungkin dapat menulis pemilih yang menargetkan apa yang Anda inginkan. Dengan contoh di atas, semua h1..h6elemen dapat ditargetkan dengan menggabungkan kelas :first-childdan :notpseudo dari CSS3, tersedia di semua browser modern, seperti:

.row :first-child:not(header) { /* ... */ }

Di masa depan, penyeleksi pseudo-kelas lanjutan seperti :has(), dan kombinator saudara kandung berikutnya ( ~), akan memberikan lebih banyak kontrol saat standar Web terus berkembang seiring waktu.

Anda juga dapat menggunakan PostCSS dan plugin penyeleksi kustom

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

Keluaran:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}

Anda dapat mengklasifikasikan semua judul dalam dokumen Anda jika Anda ingin menargetkannya dengan pemilih tunggal, sebagai berikut,

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

dan di css

.heading{
    color: #Dad;
    background-color: #DadDad;
}

Saya tidak mengatakan ini selalu praktik terbaik, tetapi ini bisa bermanfaat, dan untuk penargetan sintaksis, lebih mudah dalam banyak hal,

jadi jika Anda memberikan semua h1 hingga h6 kelas .heading yang sama di html, maka Anda dapat memodifikasinya untuk setiap dokumen html yang memanfaatkan lembar css itu.

terbalik, lebih banyak kontrol global dibandingkan "artikel bagian h1, dll {}",

Kelemahannya, daripada memanggil semua penyeleksi di tempat di css, Anda akan memiliki lebih banyak mengetik html, namun saya menemukan bahwa memiliki kelas di html untuk menargetkan semua judul dapat bermanfaat, hanya berhati-hati dari prioritas dalam css, karena konflik dapat muncul dari

Baru :is()CSS pseudo-class dapat melakukannya dalam satu pemilih:

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}