CSS에서 클래스 선택기를 사용하는 방법에 대한 자세한 예

CSS에서 클래스 선택자는 클래스 이름 앞에 점을 추가하는 것입니다. 클래스가 여러 개인 경우 점을 여러 개 추가하는 대신 .important.urgent 형식이 됩니다.

클래스 선택기
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라는 이름의 더 큰 요소는 테이블 또는 p일 수 있습니다.)
요소는 클래스에 따라 선택할 수도 있습니다.

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

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

   <td class="fancy">

다중 클래스 선택기

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

<p class="important warning">
This paragraph is a very important warning.
</p>

클래스가 중요하다고 가정합니다. 클래스 경고가 있는 모든 요소는 굵게 표시되고 클래스 경고가 있는 모든 요소는 기울임꼴로 표시됩니다. 중요 및 경고가 모두 포함된 클래스가 있는 모든 요소에도 은색 배경이 있습니다.

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

2. 두 개의 클래스 선택기를 함께 연결하면 해당 클래스 이름을 포함하는 요소만 선택할 수 있습니다(클래스 이름의 순서는 제한되지 않음).
다중 클래스 선택기에 클래스 이름 목록에 없는 클래스 이름이 포함되어 있으면 일치가 실패합니다. 아래 규칙을 살펴보세요.

.important.urgent {background:silver;}

예상대로 이 선택자는 클래스 속성에 important 및 긴급 단어가 포함된 p 요소만 일치합니다. 따라서 p 요소의 클래스 속성에 important 및 warning이라는 단어만 있는 경우 일치하지 않습니다. 그러나 다음 요소와 일치합니다.

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

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