CSS 클래스 선택기의 표현은 무엇입니까?

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에서는 작동하지 않습니다.

다른 선택기와 결합

클래스 선택기는 요소 선택기와 같은 다른 선택기와 함께 사용할 수 있습니다.

예를 들어 단락만 빨간색 텍스트로 표시되도록 할 수 있습니다.

p.center{color:red;}

이제 선택기는 클래스 속성에 center가 포함된 모든 p 요소와 일치하지만 이 클래스 속성이 있는지 여부에 관계없이 다른 유형의 요소는 일치하지 않습니다. 선택기 p.center는 "클래스 속성 값이 center인 모든 단락"으로 해석됩니다. h1 요소는 단락이 아니기 때문에 이 규칙의 선택기가 일치하지 않으므로 h1 요소가 빨간색 텍스트로 바뀌지 않습니다.

h1 요소에 다른 스타일을 지정하려면 h1.center 선택기를 사용할 수 있습니다.

p.center {color:red;}
h1.center {color:blue;}

위 내용은 CSS 클래스 선택기의 표현은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!