스타일을 한 번에 여러 개의 수업에 적용하려면 어떻게 해야 합니까?

스타일을 한 번에 여러 개의 수업에 적용하려면 어떻게 해야 합니까?

이름이 다른 두 클래스가 CSS에서 같은 속성을 가지길 원합니다.반복하고 싶지 않아요

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}

<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

두 반 모두 같은 일을 하고 있기 때문에, 저는 그것을 하나로 통합할 수 있을 것입니다.내가 어떻게 그럴 수 있을까?

.abc, .xyz { margin-left: 20px; }

당신이 찾는 것입니다.

쉼표로 구분하여 동일한 속성에 대해 여러 CSS 선언을 가질 수 있습니다.

.abc, .xyz {
   margin-left: 20px;
}

CSS를 반복하지 않기

 a.abc, a.xyz{
    margin-left:20px;
 }

오어

 a{
    margin-left:20px;
 }

클래스 이름을 쉼표로 구분합니다.

.a,.b{
your styles
}

다음과 같이 사용하면 코드가 작성한 것보다 더 효과적일 수 있습니다.다른 기능을 추가해야 합니다.

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

오어

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

오어

a {
margin-left:20px;
width: 100px;
height: 100px;
} 

그리고 이전에 부모님과 함께 이러한 클래스를 설정한 적이 있다면 다음과 같이 부모님과 함께 다시 설정해야 합니다(매번 반복).

parent .abc, parent .xyz

CSS 의사 클래스 :is(이전의 :any 및 :matches) 및 :where를 사용하면 쉼표를 사용하여 수준에 관계없이 여러 클래스를 일치시킬 수 있습니다.

뿌리 수준에서,:is(.abc, .xyz)그리고..abc, .xyz거의 동일한 기능을 합니다.그러나 :는 전체 선택기를 여러 번 복사하지 않고 선택기의 일부만 일치시킬 수 있습니다.

예를 들어, 일치시키려면.root .abc .child그리고..root .xyz .child, 다음과 같이 코드를 작성할 수 있습니다.

.root :is(.abc, .xyz) .child {
   margin-left: 20px;
}  

<div class="root">
  <a class="abc">
    <span class="child">Lorem</span>
  </a>
  <a class="xyz">
    <span class="child">Ipsum</span>
  </a>
</div>

:is 와 :where의 차이점은 선택기의 특이성을 계산할 때 :where가 무시된다는 것입니다.

• 의 특수성..root :is(.abc, .xyz) .child= 의 특수성..root .abc .child
• 의 특수성..root :where(.abc, .xyz) .child= 의 특수성..root .child

두 의사 클래스 모두 용서하는 선택기 목록을 받아들입니다. 즉, 하나의 선택기가 구문이 지원되지 않기 때문에(너무 새 것이거나 너무 오래되었거나 잘못되었기 때문에) 다른 선택기가 여전히 작동합니다.이것은 :를 루트 레벨에서도 유용하게 만들어 주는데, 이것은 한 선택기가 나머지를 깨뜨릴 것이라는 두려움 없이 현대 CSS 기능을 사용하여 선택기를 결합할 수 있기 때문입니다.

추신: 이 질문은 질문의 더 어려운 변화에 대한 답이지만, 구글은 너무 많은 질문에 대해 이 페이지를 반환하기 때문에 이 정보가 여기에 적합할 것이라고 생각합니다.

이름을 적고 쉼표로 구분하기만 하면 여러 클래스에 스타일을 한 번에 적용할 수 있습니다.

예를 들어, "하나"와 "둘"이라는 이름을 가진 두 개의 클래스가 있고 두 클래스 모두에 몇 가지 공통적인 스타일을 적용해야 한다고 가정해 보겠습니다.아래에 제시된 코드를 보고 이해하시면 됩니다.

.one, .two{ 
display: inline-block;
background-color: #ffffff;
}

SCSS로 @extend를 사용하여 이를 달성하는 방법도 있습니다.

언급URL : https://stackoverflow.com/questions/2099252/how-can-i-apply-styles-to-multiple-classes-at-once