클래스 선택자

클래스 선택기를 사용하면 문서 요소와 독립적으로 스타일 스타일을 지정할 수 있습니다.

예: .class{}(클래스 선택기의 기호인 점으로 시작하고 그 뒤에 속성 이름, 구체적인 설정은 중괄호 안에 있습니다)

간단한 예를 들어보겠습니다:

html 파일:

<div class="div">
    php中文网
</div>

css 파일:

.div{color: cadetblue;
}

이런 식으로, 맞춤형 효과를 얻을 수 있습니다:

또한 이전에 요소 선택기와 결합된 클래스 선택기를 사용하는 방법을 본 적이 있습니다.

<h1 class="div">php 중국 사이트</h1>

이제 CSS 파일을 다음과 같이 수정하겠습니다.

h1.div{color: cadetblue;
}

이렇게 클래스 선택기 앞에 요소 설명을 추가하면 이 .div는 h1에서만 작동합니다.

구체적인 효과를 살펴보겠습니다.

다음으로 이야기할 것은 다중 클래스 선택기입니다: .class.class{} 우리는 이전에 이것을 건드리지 않았습니다. 글을 쓰면서 느껴봅시다: html 파일에는 여러 p 필드가 나열되어 있습니다. 비교하기 쉽습니다:

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>

CSS 파일에는 하나의 설정을 수정할 수 있는 선택기가 없습니다. 첫 번째 색상은 파란색과 검정색이고 두 번째 글꼴 크기는 20px이며 세 번째 글꼴 스타일은 기울임꼴입니다.

.p1{    color: cadetblue;
}.p2{    font-size: 20px;
}.p3{    font-style: italic;
}

다음은 효과의 스크린샷입니다.

이제 다중 카테고리 선택기를 사용하겠습니다.

여기서는 CSS 파일만 추가하면 됩니다. p3을 .p1.p2로 변경하세요. 또한 html에서 인용할 때 세 번째 p 태그 클래스를 수정하세요. css:

.p1.p2{    font-style: italic;
}

html:

<p class="p1 p2">php中文网</p>

다음은 결과 사진입니다.

여기서 세 번째 문단의 p1 색상, p2 글꼴 크기, 및 자체 이탤릭체입니다. 다중 카테고리 선택기의 응용 프로그램입니다.