CSS 클래스 selector_CSS/HTML 사용 방법에 대한 자세한 설명

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

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

.center {text-align: center}

위의 예에서 center 클래스가 있는 모든 HTML 요소는 중앙에 배치됩니다.
아래 HTML 코드에서 h1과 p 요소 모두 중앙 클래스를 갖습니다. 이는 둘 다 ".center" 선택기의 규칙을 준수한다는 것을 의미합니다.

코드 복사 코드는 다음과 같습니다.

   

이 제목은 중앙 정렬됩니다

이 단락도 중앙 정렬됩니다

참고: 클래스 이름의 첫 번째 문자로 숫자를 사용할 수 없습니다! Mozilla나 Firefox에서는 작동하지 않습니다.
id와 마찬가지로 클래스도 파생 선택자로 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

.fancy td {
      color: #f60;
      background: #666; 큰 요소 내부의 테이블 셀은 회색 배경에 주황색 텍스트를 표시합니다. (fancy라는 이름의 더 큰 요소는 테이블이나 div일 수 있습니다.)
요소는 클래스에 따라 선택할 수도 있습니다.

코드 복사

코드는 다음과 같습니다. td.fancy { color: #f60; background: #666; >위의 예에서 클래스 이름이 fancy인 테이블 셀은 배경이 회색이고 주황색입니다.

코드 복사

코드는 다음과 같습니다.

  다중 카테고리 선택기 1. HTML에서 클래스 값에는 각 단어가 공백으로 구분된 단어 목록이 포함될 수 있습니다. 예를 들어, 특정 요소를 중요 및 경고로 표시하려면 다음과 같이 작성할 수 있습니다(두 단어의 순서는 중요하지 않으며 경고 중요로 작성할 수 있음).

코드 복사

코드는 다음과 같습니다.

이 문단은 매우 중요한 경고입니다. .

class important가 있는 모든 요소는 굵게 표시되고, 클래스 경고가 있는 모든 요소는 기울임꼴로 표시되며, class에는 important와 warning이 모두 포함되어 있다고 가정합니다. 은색 배경도 있습니다. 다음과 같이 작성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

.important {font -weight:bold ;}.warning {font-weight:italic;}.important.warning {Background:silver;} 2. 이 두 클래스 이름을 모두 포함하는 요소만 순서에 관계없이 선택할 수 있습니다. 다중 클래스 선택기에 클래스 이름 목록에 없는 클래스 이름이 포함되어 있으면 일치가 실패합니다. 아래 규칙을 참조하세요.

코드 복사

코드는 다음과 같습니다.

.important .긴급 {배경 :은색;}
Seperti yang dijangka, pemilih ini hanya akan memadankan elemen p yang atribut kelasnya mengandungi perkataan penting dan mendesak. Oleh itu, jika elemen p hanya mempunyai perkataan penting dan amaran dalam atribut kelasnya, ia tidak akan sepadan. Walau bagaimanapun, ia boleh sepadan dengan elemen berikut:

Salin kod Kod adalah seperti berikut:

Perenggan ini adalah amaran yang sangat penting dan mendesak.