Bir sayfadaki tüm h etiketlerini hedeflemek istiyorum. Bunu bu şekilde yapabileceğini biliyorum ...

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

ancak bunu gelişmiş CSS seçicileri kullanarak yapmanın daha etkili bir yolu var mı? örneğin:

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

(ama tabii ki bu işe yaramıyor)

Hayır, virgülle ayrılmış bir liste bu durumda istediğiniz şeydir.

Temel css değildir, ancak LESS ( http://lesscss.org ) kullanıyorsanız, bunu özyineleme kullanarak yapabilirsiniz:

.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 ) bunu yönetmenize izin verir, ancak özyinelemeye izin vermez; onlar var @forbu örnekleri için sözdizimi:

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

LESS veya Sass gibi CSS ile derlenen dinamik bir dil kullanmıyorsanız, kesinlikle bu seçeneklerden birine göz atmalısınız. CSS gelişiminizi gerçekten basitleştirebilir ve daha dinamik hale getirebilirler.

SASS kullanıyorsanız, bu karışımı da kullanabilirsiniz:

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

Şöyle kullanın:

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

Düzenleme: İsteğe bağlı olarak başlık öğelerinin her birine bir yer tutucu seçici genişleterek bunu yapmak benim kişisel favori yolu.

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

Sonra herhangi bir sınıfı hedefleyeceğim gibi tüm başlıkları hedefleyebilirim, örneğin:

.element > %headings {
    color: red;
}

Ön işlemcilerden bahsettiğimiz için SCSS + Compass bunu bir çırpıda yapıyor.

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

Tüm Pusula yardımcı seçicileri hakkında buradan bilgi edinebilirsiniz :

Stylus 'ın seçici interpolasyon

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

Tüm h etiketleri (h1, h2 vb.) İçin jQuery seçici ": header" şeklindedir. Örneğin, tüm h etiketlerini jQuery ile kırmızı renkte yapmak istiyorsanız, şunu kullanın:

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

Bunu vanilya CSS ile çözmek için h1..h6elementlerin atalarında desen arayın :

<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>

Desenleri tespit edebiliyorsanız, istediğinizi hedefleyen bir seçici yazabilirsiniz. Yukarıdaki örnek göz önüne alındığında, tüm h1..h6elemanlar , aşağıdaki gibi tüm modern tarayıcılarda bulunan CSS3'ten :first-childve :notsözde sınıfları birleştirerek hedeflenebilir :

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

Gelecekte, ilerleyen kardeş birleştiriciler ( ) gibi gelişmiş sözde sınıf seçicileri :has(), Web standartları zaman içinde gelişmeye devam ettikçe daha da fazla kontrol sağlayacaktır.~

PostCSS ve özel seçiciler eklentisini de kullanabilirsiniz

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

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

Çıktı:

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

Aşağıdaki gibi tek bir seçiciyle hedeflemek isterseniz, belgenizdeki tüm başlıkları sınıflandırabilirsiniz,

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

ve css'de

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

Bunun her zaman en iyi uygulama olduğunu söylemiyorum, ancak yararlı olabilir ve sözdizimini hedeflemek için birçok yönden daha kolay,

tüm h1'den h6'ya html'de aynı .heading sınıfını verirseniz, bu css sayfasını kullanan herhangi bir html dokümanı için bunları değiştirebilirsiniz.

"bölüm div makalesi h1, vs {}" ile karşılaştırıldığında daha küresel kontrol,

olumsuz, css yerinde tüm seçicileri çağırmak yerine, html'de çok daha fazla yazı yazacaksınız, ancak html'de tüm başlıkları hedeflemek için bir sınıfa sahip olmanın yararlı olabileceğini, sadece css, çünkü çatışmalar

Yeni :is()CSS sözde sınıfı bunu tek bir seçicide yapabilir:

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