CSS 클래스 선택기에 사용할 항목

CSS에서는 클래스 선택기가 마침표와 함께 표시됩니다.

.center {text-align: center}

위 예에서 중앙 클래스가 있는 모든 HTML 요소는 중앙에 배치됩니다.

아래 HTML 코드에서 h1과 p 요소 모두 중앙 클래스를 갖습니다. 이는 둘 다 ".center" 선택기의 규칙을 따른다는 것을 의미합니다.

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

참고: 클래스 이름의 첫 번째 문자로 숫자를 사용할 수 없습니다! Mozilla나 Firefox에서는 작동하지 않습니다.

id와 마찬가지로 클래스도 파생 선택기로 사용할 수 있습니다.

.fancy td {
color: #f60;
background: #666;
}

위의 예에서 클래스 이름이 fancy인 더 큰 요소 내부의 테이블 셀은 회색 배경에 주황색 텍스트를 표시합니다. (fancy라는 이름의 더 큰 요소는 테이블이나 div일 수 있습니다.)

요소는 클래스에 따라 선택할 수도 있습니다.

td.fancy {
color: #f60;
background: #666;
}

위 예에서 클래스 이름이 fancy인 테이블 셀은 회색 배경의 주황색입니다.

<td class="fancy">

테이블 요소에 원하는 만큼 클래스 팬시를 할당할 수 있습니다. fancy로 표시된 셀은 회색 배경의 주황색입니다. fancy라는 클래스가 할당되지 않은 셀은 이 규칙의 영향을 받지 않습니다. 클래스 팬시가 있는 단락은 회색 배경의 주황색이 아니며 물론 팬시로 표시된 다른 요소는 이 규칙의 영향을 받지 않는다는 점도 주목할 가치가 있습니다. 이는 모두 우리가 이 규칙을 작성한 방식 때문이며, 효과는 fancy로 표시된 테이블 셀로 제한됩니다(예: fancy 클래스를 선택하기 위해 td 요소 사용).

위 내용은 CSS 클래스 선택기에 사용할 항목의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!