CSS를 사용하여 단일 HTML 요소에서 여러 클래스의 스타일을 어떻게 지정할 수 있습니까?

단일 요소에 여러 클래스 스타일 지정

CSS로 작업할 때 특정 스타일 효과를 얻기 위해 HTML 요소에 여러 클래스를 적용해야 할 수도 있습니다. 그러나 HTML을 사용하여 여러 클래스를 할당하면 혼란스러워서 잘못된 결과가 발생할 수 있습니다.

귀하의 경우 첫 번째 소셜 아이콘에서 위쪽 패딩을 제거하고 마지막 소셜 아이콘에서 아래쪽 테두리를 제거하려고 했습니다. 두 개의 개별 클래스를 동일한 소셜 div에 직접 추가하려고 시도한 HTML 마크업에서 문제가 발생했습니다.

올바른 HTML 마크업:

여러 클래스를 올바르게 사용하려면 , 다음과 같이 동일한 클래스 속성 내에 나열해야 합니다.

<div class="social first"></div>

해당 CSS:

.social.first {
  padding-top: 0;
}

이 구문을 사용하면 .social 및 .first 클래스는 HTML의 div 요소에 적용되므로 두 스타일 요구 사항을 모두 대상으로 지정할 수 있습니다.

예시 데모:

/* Base styling for both social icons */
.social {
  width: 330px;
  height: 75px;
  float: right;
  text-align: left;
  padding: 10px 0;
  border-bottom: dotted 1px #6d6d6d;
}

/* Styling for the first social icon */
.social.first {
  padding-top: 0;
}

/* Styling for the last social icon */
.social.last {
  border: none;
}

이 코드는 성공적으로 수행됩니다. 첫 번째 소셜 아이콘 상단에 제로 패딩을 적용하고 마지막 소셜 아이콘의 하단 테두리를 제거하여 원하는 스타일 요구 사항을 충족합니다.

위 내용은 CSS를 사용하여 단일 HTML 요소에서 여러 클래스의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!