하나의 선택기로 모든 태그를 대상으로 할 수 있습니까?

하나의 선택기로 모든 태그를 대상으로 할 수 있습니까?

한 페이지의 모든 태그를 대상으로 하고 싶습니다.이런 식으로 할 수 있다는 걸 알아요

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

(하지만 분명히 이것은 효과가 없습니다.)

아니요, 쉼표로 구분된 목록이 이 경우 원하는 목록입니다.

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

새로운 CSS 의사 클래스는 하나의 셀렉터에서 할 수 있습니다.

예를 들어, 컨테이너 요소 내부의 모든 제목을 대상으로 지정할 수 있는 방법은 다음과 같습니다.

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

는 이제 에서를 합니다.:is()의 브라우저들은를 지원하지 . 해야 할 해야 합니다 , 2020 에 의 은 는 를 해야 을 하지 해야 을 하지 를 . 따라서 오래된 브라우저를 지원해야 한다면 이를 사용하는 것에 주의해야 합니다.

경우에 따라서는 다음과 매우 유사한 의사 클래스를 대신 사용할 수 있습니다.:is()다른 특수성 규칙을 가지고 있습니다.

기본 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 개발을 단순화하고 보다 역동적으로 만들 수 있습니다.

이 문제를 (현대적인) CSS로만 해결하려는 저의 시도는 다음과 같습니다.

컨텍스트 : 조플린(아주 멋진 노트필기 앱, 링크) 내부에userfile.css마크다운 노트의 표시 및 내보내기를 위해 사용자 정의 CSS를 작성할 수 있습니다.

나는 모든 제목을 (인접 형제) 특정 태그 뒤에 직접적으로 목표로 삼기를 원했는데, 즉p,ul,ol그리고.nav중간에 여백을 더하기 위해서요.따라서:

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6  {
  margin-top: 2em;
}

와우. 아주 기네요.그런 셀렉터.

그런 다음 여기 와서 배우고 노력했습니다.

p   + :is(h1, h2, h3, h4, h5, h6),
ul  + :is(h1, h2, h3, h4, h5, h6),
ol  + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

음. 훨씬 짧습니다.좋네요.

그때 문득 생각났어요.

:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

야, 이것도 효과가 있어요!정말 놀랍군요!

이것은 또한 다음과 같이 작동할 수 있습니다.:where()는른과은 CSS과은 등의 CSS .~또는 심지어 (공간) 매우 긴 목록 대신 CSS 셀렉터의 "매트릭스"를 생성합니다.

크레딧 : 이 페이지의 모든 답변은 다음을 참조합니다.:is()선택자

SCSS+Compass를 사용하면 간단히 처리할 수 있습니다. 전처리기에 대해 이야기하고 있기 때문입니다.

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

모든 컴퍼스 도우미 선택기에 대해서는 여기에서 확인할 수 있습니다.

2022년 7월 업데이트

미래가 오고 그리고 그:isselector는 @silverwind(현재 선택된 답변)가 2020년에 제시한 이 답변에서 설명한 대로 원하는 것입니다.

원답

바닐라 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의 와 의사 클래스들을 결합함으로써 대상이 될 수 있으며, 모든 최신 브라우저들에서 다음과 같이 이용할 수 있습니다.

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

, 등의 고급 의사급 선택자와 그 이후의 형제 조합자 (~), 시간이 지남에 따라 웹 표준이 계속 발전함에 따라 더욱 많은 제어 기능을 제공할 것입니다.

스타일러스 선택내삽법

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

모든 h 태그(h1, h2 등)에 대한 jQuery 선택기는 ":header"입니다.예를 들어, jQuery를 사용하여 모든 해시를 빨간색으로 만들려는 경우 다음을 사용합니다.

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

일반 CSS

평범한 CSS를 사용하면 두 가지 방법이 있습니다.페이지 내에 있는 모든 표제 요소를 대상으로 합니다(요청에 따라).

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

이것은 동일하지만 특이성을 0으로 유지합니다.

:where(h1, h2, h3, h4, h5, h6) {}

포스트 CSS 사용

PostCSS 및 사용자 지정 셀렉터 플러그인을 사용할 수도 있습니다.

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

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

출력:

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

만약 당신이 그것들을 하나의 선택기로 대상화하고 싶다면, 당신은 당신의 문서에 있는 모든 제목들을 .class 할 수 있습니다.

<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 문서에 대해 수정할 수 있습니다.

상향, "섹션 분할 기사 h1 등"과 비교하여 글로벌 컨트롤 강화,

단점, css에서 모든 선택기를 제자리에 호출하는 대신 html에 훨씬 더 많은 타이핑을 할 것입니다. 그러나 나는 html에 모든 제목을 대상으로 하는 클래스를 가지는 것이 유익할 수 있다는 것을 알았습니다, 왜냐하면 충돌이 발생할 수 있기 때문입니다.

sscs를 사용하면 6을 순환하고 빈 변수에 추가할 수 있습니다.$headings 구분자 용표용

$headings: ();

@for $index from 1 through 6 {
  $headings: list.append($headings, h#{$index}, $separator: comma);
}

#{$headings} {
  --default: var(--dark);
  color: var(--default);
}

Thanks @ste

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