>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 클래스 선택기를 사용하는 방법은 무엇입니까?

CSS에서 클래스 선택기를 사용하는 방법은 무엇입니까?

王林
王林원래의
2020-11-20 11:30:283872검색

CSS에서 클래스 선택기의 목적은 문서 요소와 독립적인 방식으로 스타일을 지정할 수 있도록 하는 것입니다. 클래스 선택자는 단독으로 사용하거나 다른 요소와 조합하여 사용할 수 있습니다. 클래스 선택기를 사용하기 전에 클래스 선택기가 제대로 작동하도록 특정 문서 마크업을 수정해야 합니다.

CSS에서 클래스 선택기를 사용하는 방법은 무엇입니까?

CSS 클래스 선택기의 역할: 문서 요소와 독립적인 방식으로 스타일을 지정할 수 있습니다.

이 선택기는 단독으로 사용하거나 다른 요소와 조합하여 사용할 수 있습니다.

(동영상 공유 학습: css 동영상 튜토리얼)

참고: 이 선택기는 문서가 적절하게 표시된 후에만 사용할 수 있으므로 일반적으로 이 두 선택기를 사용하려면 먼저 몇 가지 생각과 계획이 필요합니다.

특정 디자인 요소와 관계없이 스타일을 적용하기 위해 가장 일반적인 방법은 클래스 선택기를 사용하는 것입니다.

예:

HTML 코드 수정

클래스 선택기를 사용하기 전에 클래스 선택기가 제대로 작동할 수 있도록 특정 문서 마크업을 수정해야 합니다.

클래스 선택자의 스타일을 요소와 연결하려면 클래스를 적절한 값으로 지정해야 합니다. 아래 HTML 코드를 살펴보세요.

<h1 class="important">
This heading is very important.
</h1>

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

위 코드에서는 첫 번째 제목(h1 요소)과 두 번째 단락(p 요소)이라는 두 요소의 클래스가 중요하게 지정되어 있습니다.

구문:

그런 다음 다음 구문을 사용하여 분류된 요소에 스타일을 적용합니다. 즉, 클래스 이름 앞에 점(.)을 와일드카드 선택기와 결합합니다.

*.important {color:red;}

모든 클래스 이름을 선택하려는 경우 동일한 요소를 사용하면 나쁜 영향 없이 클래스 선택기의 와일드카드 선택기를 무시할 수 있습니다.

.important {color:red;}

관련 권장 사항: CSS 튜토리얼

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.