ฉันต้องการกำหนดเป้าหมายแท็กทั้งหมดในหน้า ฉันรู้ว่าคุณสามารถทำได้ด้วยวิธีนี้ ...

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

แต่มีวิธีที่มีประสิทธิภาพมากขึ้นในการทำเช่นนี้โดยใช้ตัวเลือก CSS ขั้นสูง? เช่นบางสิ่งเช่น:

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

(แต่เห็นได้ชัดว่านี่ไม่ได้ผล)

ไม่รายการที่คั่นด้วยเครื่องหมายจุลภาคคือสิ่งที่คุณต้องการในกรณีนี้

ไม่ใช่ css ขั้นพื้นฐาน แต่ถ้าคุณใช้ LESS ( http://lesscss.org ) คุณสามารถทำได้โดยใช้การเรียกซ้ำ:

.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 ) จะอนุญาตให้คุณจัดการสิ่งนี้ แต่จะไม่อนุญาตให้เรียกซ้ำ พวกเขามี@forไวยากรณ์สำหรับอินสแตนซ์เหล่านี้:

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

หากคุณไม่ได้ใช้ภาษาแบบไดนามิกที่รวบรวม CSS เช่น LESS หรือ Sass คุณควรลองใช้ตัวเลือกเหล่านี้ พวกเขาสามารถทำให้การพัฒนา CSS ของคุณง่ายขึ้นและมีชีวิตชีวามากขึ้น

หากคุณใช้ SASS คุณสามารถใช้มิกซ์อินนี้ได้เช่นกัน:

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

ใช้มันอย่างนั้น:

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

แก้ไข:วิธีที่ชื่นชอบส่วนตัวของฉันในการทำเช่นนี้โดยเลือกที่จะขยายตัวเลือกตัวแทนสำหรับแต่ละองค์ประกอบหัวเรื่อง

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

จากนั้นฉันสามารถกำหนดเป้าหมายส่วนหัวทั้งหมดเช่นฉันจะกำหนดเป้าหมายคลาสเดี่ยวใด ๆ ตัวอย่างเช่น:

.element > %headings {
    color: red;
}

SCSS + Compass ทำให้สิ่งนี้เป็นเรื่องง่ายเนื่องจากเรากำลังพูดถึงตัวประมวลผลล่วงหน้า

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

คุณสามารถเรียนรู้เกี่ยวกับตัวเลือกผู้ช่วยเข็มทิศได้ที่นี่ :

การแก้ไขตัวเลือกของStylus

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

ตัวเลือก jQuery สำหรับแท็ก h ทั้งหมด (h1, h2 ฯลฯ ) คือ ": header" ตัวอย่างเช่นหากคุณต้องการทำให้แท็ก h ทั้งหมดเป็นสีแดงด้วย jQuery ให้ใช้:

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

เพื่อจัดการกับสิ่งนี้ด้วยวานิลลา CSS มองหารูปแบบในบรรพบุรุษของh1..h6องค์ประกอบ:

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

หากคุณสามารถมองเห็นรูปแบบที่คุณอาจจะสามารถเขียนตัวเลือกที่กำหนดเป้าหมายสิ่งที่คุณต้องการ จากตัวอย่างข้างต้นh1..h6องค์ประกอบทั้งหมดอาจถูกกำหนดเป้าหมายโดยการรวม:first-childและ:notpseudo-classes จาก CSS3 ซึ่งมีอยู่ในเบราว์เซอร์สมัยใหม่ทั้งหมดเช่น:

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

ในอนาคตตัวเลือกการหลอกระดับขั้นสูงเช่น:has()และตัวต่อพี่น้อง ( ~) จะให้การควบคุมที่มากยิ่งขึ้นเมื่อมาตรฐานเว็บยังคงพัฒนาอยู่ตลอดเวลา

คุณยังสามารถใช้ PostCSS และปลั๊กอินตัวเลือกแบบกำหนดเอง

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

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

เอาท์พุท:

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

คุณสามารถจัดระดับส่วนหัวทั้งหมดในเอกสารของคุณหากคุณต้องการกำหนดเป้าหมายด้วยตัวเลือกเดียวดังนี้

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

และใน css

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

ฉันไม่ได้บอกว่านี่เป็นแนวปฏิบัติที่ดีที่สุดเสมอ แต่มันมีประโยชน์และสำหรับการกำหนดเป้าหมายไวยากรณ์ง่ายขึ้นในหลาย ๆ ด้าน

ดังนั้นถ้าคุณให้ h1 ทั้งหมดผ่าน h6 คลาส. heading เดียวกันใน html จากนั้นคุณสามารถแก้ไขพวกเขาสำหรับเอกสาร html ใด ๆ ที่ใช้ชีท css นั้น

กลับหัวควบคุมทั่วโลกมากขึ้นเมื่อเทียบกับ "ส่วน div บทความ h1, ฯลฯ {}",

ข้อเสียแทนการเรียกตัวเลือกทั้งหมดในสถานที่ใน CSS คุณจะมีมากขึ้นในการพิมพ์ HTML แต่ฉันพบว่าการมีชั้นเรียนใน HTML เพื่อกำหนดเป้าหมายหัวข้อทั้งหมดจะเป็นประโยชน์เพียงระวังความสำคัญใน css เพราะความขัดแย้งอาจเกิดขึ้นได้

ใหม่:is()CSS หลอกชั้นสามารถทำมันได้ในหนึ่งตัวเลือก:

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