Tôi muốn nhắm mục tiêu tất cả các thẻ h trên một trang. Tôi biết bạn có thể làm theo cách này ...

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

nhưng có cách nào hiệu quả hơn để làm điều này bằng cách sử dụng các bộ chọn CSS nâng cao không? ví dụ như một cái gì đó như:

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

(nhưng rõ ràng điều này không hoạt động)

Không, danh sách được phân tách bằng dấu phẩy là những gì bạn muốn trong trường hợp này.

Đây không phải là css cơ bản, nhưng nếu bạn đang sử dụng LESS ( http://lesscss.org ), bạn có thể thực hiện việc này bằng cách sử dụng đệ quy:

.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 ) sẽ cho phép bạn quản lý việc này, nhưng sẽ không cho phép đệ quy; họ có @forcú pháp cho những trường hợp này:

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

Nếu bạn không sử dụng ngôn ngữ động biên dịch sang CSS như LESS hoặc Sass, bạn chắc chắn nên kiểm tra một trong các tùy chọn này. Họ thực sự có thể đơn giản hóa và làm cho sự phát triển CSS của bạn năng động hơn.

Nếu bạn đang sử dụng SASS, bạn cũng có thể sử dụng mixin này:

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

Sử dụng nó như vậy:

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

Chỉnh sửa: Cách yêu thích cá nhân của tôi để thực hiện việc này bằng cách tùy chọn mở rộng bộ chọn giữ chỗ trên mỗi thành phần tiêu đề.

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

Sau đó, tôi có thể nhắm mục tiêu tất cả các tiêu đề như tôi sẽ nhắm mục tiêu bất kỳ lớp nào, ví dụ:

.element > %headings {
    color: red;
}

SCSS + La bàn làm cho điều này trở nên nhanh chóng, vì chúng ta đang nói về bộ xử lý trước.

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

Bạn có thể tìm hiểu về tất cả các bộ chọn trợ giúp La bàn tại đây :

Nội suy bộ chọn của bút stylus

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

Bộ chọn jQuery cho tất cả các thẻ h (h1, h2, v.v.) là ": tiêu đề". Ví dụ: nếu bạn muốn làm cho tất cả các thẻ h có màu đỏ bằng jQuery, hãy sử dụng:

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

Để giải quyết vấn đề này với vanilla CSS, hãy tìm các mẫu trong tổ tiên của các h1..h6phần tử:

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

Nếu bạn có thể phát hiện ra các mẫu bạn có thể viết một bộ chọn nhắm mục tiêu những gì bạn muốn. Với ví dụ trên, tất cả các h1..h6yếu tố có thể được nhắm mục tiêu bằng cách kết hợp các lớp giả :first-childvà :nottừ CSS3, có sẵn trong tất cả các trình duyệt hiện đại, như vậy:

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

Trong các bộ chọn lớp giả tiên tiến trong tương lai như :has()và các bộ kết hợp anh chị em tiếp theo ( ~), sẽ cung cấp nhiều quyền kiểm soát hơn khi các tiêu chuẩn Web tiếp tục phát triển theo thời gian.

Bạn cũng có thể sử dụng PostCSS và plugin chọn tùy chỉnh

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

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

Đầu ra:

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

Bạn có thể. Phân loại tất cả các tiêu đề trong Tài liệu của bạn nếu bạn muốn nhắm mục tiêu chúng với một bộ chọn duy nhất, như sau,

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

và trong css

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

Tôi không nói rằng đây luôn là cách thực hành tốt nhất, nhưng nó có thể hữu ích và để nhắm mục tiêu cú pháp, dễ dàng hơn theo nhiều cách,

vì vậy nếu bạn cung cấp cho tất cả h1 đến h6 cùng một lớp .heading trong html, thì bạn có thể sửa đổi chúng cho bất kỳ tài liệu html nào sử dụng bảng css đó.

upside, kiểm soát toàn cầu hơn so với "phần div bài viết h1, vv {}",

Nhược điểm, thay vì gọi tất cả các bộ chọn vào vị trí trong css, Bạn sẽ gõ nhiều hơn vào html, nhưng tôi thấy rằng việc có một lớp trong html để nhắm mục tiêu tất cả các tiêu đề có thể có lợi, chỉ cần cẩn thận trước Css, bởi vì xung đột có thể phát sinh từ

Lớp :is()giả CSS mới có thể thực hiện điều đó trong một bộ chọn:

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