페이지에서 모든 h 태그를 타겟팅하고 싶습니다. 나는 당신이 이런 식으로 할 수 있다는 것을 알고 있습니다 ...

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

LESS 또는 Sass와 같은 CSS로 컴파일되는 동적 언어를 사용하지 않는 경우 이러한 옵션 중 하나를 반드시 확인해야합니다. 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
  }

여기에서 모든 나침반 도우미 선택기에 대해 배울 수 있습니다 .

스타일러스 의 셀렉터 보간

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

모든 h 태그 (h1, h2 등)의 jQuery 선택기는 ": header"입니다. 예를 들어, jQuery를 사용하여 모든 h 태그를 빨간색으로 만들려면 다음을 사용하십시오.

$(':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요소는 CSS3의 의사 클래스 :first-child와 :not의사 클래스를 결합하여 모든 최신 브라우저에서 사용할 수 있습니다.

.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에 html의 동일한 .heading 클래스를 제공하면 해당 CSS 시트를 사용하는 모든 HTML 문서에 대해 해당 클래스를 수정할 수 있습니다.

거꾸로 "섹션 div 기사 h1 등 {}"에 비해 더 많은 글로벌 제어,

단점은 CSS에서 모든 선택기를 호출하는 대신 html로 입력하는 것이 훨씬 많지만 모든 제목을 대상으로하는 html 클래스가 있으면 도움이 될 수 있다는 것입니다. CSS는 충돌로 인해 발생할 수 있기 때문에

새로운 :is()CSS 의사 클래스 는 하나의 선택기에서이를 수행 할 수 있습니다.

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