여러 클래스에 스타일을 한 번에 적용하려면 어떻게해야합니까?


277

이름이 다른 두 클래스가 CSS에서 동일한 속성을 갖기를 원합니다. 코드를 반복하고 싶지 않습니다.

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}
<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

두 클래스가 모두 같은 일을하고 있기 때문에 하나로 병합 할 수 있어야합니다. 어떻게해야합니까?

답변:


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

당신이 찾고있는 것입니다.


6
+1, 정확히 내가 찾던 것. 그런 다음 .xyz {font-weight : bold;}를 함께 적용하지 않으려는 속성에 대해 .abc 및 / 또는 .xyz에 대해 별도의 두 번째 항목을 가질 수도 있습니다. 왼쪽으로 20px지만 .abc는 왼쪽 여백 만 있습니다.
RyanfaeScotland

64

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

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

1
선택한 답변은 완전히 정확하지만 초보자는 자신이하는 일을 이해할 것이라고 보장 할 수 없습니다. 나는 더 설명 된 것과 함께 갈 것입니다. "여기 물고기"가 아니라 "어업 방법"에 가깝기 때문입니다.
Olgun Kaya

15

CSS를 반복하지 마십시오

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

또는

 a{
    margin-left:20px;
 }

2
나는 abc한 학급 이름과 xyz다른 학급 이름을 의미 한다고 생각 합니다. 질문에 따라 불필요하고 혼란스러운 공통 속성에 공통 클래스 이름을 사용하는 것이 좋습니다.
Arete

3

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

.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;
} 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.