CSS 선택기에는 어떤 유형이 있나요?

CSS(Cascading Style Sheets)는 웹 디자인에 사용되는 스타일 시트 언어입니다. 웹페이지의 형식을 더욱 아름답고 표준화할 수 있습니다. 선택기는 CSS에서 매우 중요한 개념으로, 웹 페이지에서 요소를 선택하는 데 사용할 수 있습니다. 이 글에서는 독자들이 CSS를 더 잘 배우고 익히는 데 도움이 되도록 CSS 선택기의 분류를 소개합니다.

1. 요소 선택기

요소 선택기는 웹 페이지에서 HTML 요소를 선택할 수 있는 가장 기본적인 선택기입니다. 요소 선택기의 구문은 HTML 요소의 이름입니다. 예를 들어, 다음 CSS 코드를 사용하여 모든 단락 요소를 선택할 수 있습니다.

p {
  color: red;
}

이 코드는 모든 단락 요소의 텍스트 색상을 빨간색으로 설정합니다.

2. 클래스 선택자

클래스 선택자는 웹 페이지에서 속성은 같지만 값이 다른 요소를 분류하여 동일한 클래스 이름을 선택한 다음 이 클래스 이름에 스타일을 설정하는 것을 말합니다. 클래스 선택자의 구문 형식은 마침표(.) 뒤에 클래스 이름이 오는 것입니다. 예를 들어, 다음 CSS 코드를 통해 클래스 이름이 "example"인 요소를 선택할 수 있습니다.

.example {
  color: blue;
}

이 코드는 클래스 이름이 "example"인 모든 요소의 텍스트 색상을 파란색으로 설정합니다.

3. ID 선택기

ID 선택기는 웹페이지의 고유한 요소를 식별하는 데 사용되며 각 요소는 하나의 ID만 가질 수 있습니다. ID 선택기의 구문은 파운드 기호(#) 뒤에 ID 이름이 오는 형식입니다. 예를 들어, 다음 CSS 코드를 통해 ID가 "header"인 요소를 선택할 수 있습니다.

#header {
  font-size: 20px;
}

이 코드는 ID가 "header"인 요소의 글꼴 크기를 20px로 설정합니다.

4. 하위 항목 선택자

하위 항목 선택자는 웹 페이지에서 하위 요소를 선택할 수 있습니다. 하위 항목 선택기의 구문은 상위 요소와 하위 요소를 공백으로 구분하는 것입니다. 예를 들어 다음 CSS 코드를 사용하여 모든 div 요소에서 p 요소를 선택할 수 있습니다.

div p {
  text-align: center;
}

이 코드는 p 요소의 텍스트를 모든 div 요소 아래 중앙에 배치합니다.

5. 인접 형제 선택자

인접 형제 선택자는 조건을 만족하는 두 개의 인접한 형제 요소를 선택할 수 있습니다. 인접한 형제 선택자의 구문 형식은 한정된 요소 뒤에 더하기 기호(+)와 선택한 요소를 추가하는 것입니다. 예를 들어 다음 CSS 코드를 통해 div 요소에 인접한 ul 요소를 선택할 수 있습니다.

div + ul {
  list-style: none;
}

이 코드는 div 요소에 인접한 ul 요소의 목록 스타일을 제거합니다.

6. 하위 요소 선택기

하위 요소 선택기는 조건에 맞는 하위 요소를 선택할 수 있습니다. 하위 요소 선택기의 구문 형식은 정규화된 요소 뒤에 보다 큼 기호(>)와 선택된 하위 요소를 추가하는 것입니다. 예를 들어, 다음 CSS 코드를 통해 div 요소의 하위 요소인 h1 요소를 선택할 수 있습니다.

div > h1 {
  font-weight: bold;
}

이 코드는 div 요소의 하위 요소인 h1 요소의 글꼴을 굵게 표시합니다.

요약하자면 CSS 선택자에는 요소 선택자, 클래스 선택자, ID 선택자, 하위 항목 선택자, 인접 형제 선택자 및 하위 요소 선택자가 포함됩니다. 이러한 선택기를 올바르게 사용하면 CSS 스타일을 더욱 미묘하고 유연하게 만들 수 있습니다. 이러한 선택기의 사용법을 배우고 익히면 CSS 효과의 효율성과 품질을 향상시키는 데 도움이 됩니다.

위 내용은 CSS 선택기에는 어떤 유형이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!