모두 타겟팅 할 수 있습니까

모두 타겟팅 할 수 있습니까 단일 선택기가있는 태그?

---

페이지에서 모든 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;

---

바닐라 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>

If you can spot patterns you may be able to write a selector which targets what you want. Given the above example all h1..h6 elements may be targeted by combining the :first-child and :not pseudo-classes from CSS3, available in all modern browsers, like so:

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

In the future advanced pseudo-class selectors like :has(), and subsequent-sibling combinators (~), will provide even more control as Web standards continue to evolve over time.

---

You could .class all the headings in Your document if You would like to target them with a single selector, as follows,

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

and in the css

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

I am not saying this is always best practice, but it can be useful, and for targeting syntax, easier in many ways,

so if You give all h1 through h6 the same .heading class in the html, then You can modify them for any html docs that utilize that css sheet.

upside, more global control versus "section div article h1, etc{}",

downside, instead of calling all the selectors in on place in the css, You will have much more typing in the html, yet I find that having a class in the html to target all headings can be beneficial, just be careful of precedence in the css, because conflicts could arise from

---

The jQuery selector for all h tags (h1, h2 etc) is " :header ". For example, if you wanted to make all h tags red in color with jQuery, use:

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

---

You can also use PostCSS and the custom selectors plugin

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

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

Output:

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

참고URL : https://stackoverflow.com/questions/7539125/can-i-target-all-h-tags-with-a-single-selector