일반적인 CSS 선택기 분류 개요

일반적인 CSS 선택기 분류 및 특정 코드 예

CSS 선택기는 HTML 문서의 요소를 선택하고 특정 스타일을 지정하는 데 사용되는 도구입니다. 다양한 유형의 CSS 선택기를 익히는 것은 효율적인 CSS 스타일시트를 작성하는 데 중요합니다. 다음은 일반적인 CSS 선택기 카테고리와 특정 코드 예시입니다.

1. 요소 선택기
   요소 선택기는 가장 일반적인 CSS 선택기입니다. 태그 이름을 선택하여 요소를 선택합니다. 예를 들어 모든 단락 요소를 선택하려면 다음 스타일을 사용할 수 있습니다.

p {
  color: blue;
}

2. 클래스 선택기(클래스 선택기)
   클래스 선택기는 HTML 요소에 클래스 속성을 추가하고 마침표를 사용하여 식별합니다. 문서의 여러 요소에 동일한 스타일을 적용할 수 있습니다. 예는 다음과 같습니다.

.button {
  background-color: red;
}

HTML에서 사용하는 방법:

<button class="button">Click me</button>

3. ID 선택기(ID 선택기)
   ID 선택기는 HTML 요소에 id 속성을 추가하고 파운드 기호를 사용하여 식별합니다. 하나의 요소에만 특정 스타일을 적용해야 하는 상황에 적합합니다. 코드 예시는 다음과 같습니다. HTML에서

#header {
  background-color: yellow;
}

사용 방법:

<header id="header">This is the header</header>

4. 자식 선택기(자식 선택기)
   자식 선택기는 요소의 직접 하위 요소를 선택할 수 있습니다. 이는 보다 큼 기호(>)로 식별됩니다. 다음 코드는 모든 단락 요소의 직접 하위 요소 범위를 선택하고 글꼴 색상을 빨간색으로 설정합니다.

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. Descendant Selector(Descendant Selector)
   Descendant 선택기는 요소의 모든 하위 요소를 선택할 수 있습니다. 공백을 사용하여 표현됩니다. 다음 코드는 모든 단락 요소 내의 범위 요소를 선택하고 배경색을 회색으로 설정합니다.

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. Adjacent Sibling Selector(Adjacent Sibling Selector)
   Adjacent Sibling Selector는 요소 바로 뒤에 있는 형제 요소를 선택할 수 있습니다. 더하기 기호(+)로 식별됩니다. 다음 코드는 모든 h2 요소 바로 뒤에 있는 p 요소를 선택하고 글꼴 색상을 파란색으로 설정합니다.

h2 + p {
  color: blue;
}

<h2 id="Heading">Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. 범용 선택기(Universal Selector)
   범용 선택기는 HTML 문서의 모든 요소를 ​​선택할 수 있습니다. 별표(*)로 표시됩니다. 다음 코드는 페이지의 모든 요소를 ​​선택하고 테두리를 1픽셀로 설정합니다.

* {
  border: 1px solid black;
}

위는 일반적인 CSS 선택기 카테고리와 해당 샘플 코드입니다. 다양한 유형의 선택기와 사용법을 이해하면 CSS 스타일 시트를 더 유연하고 정확하게 작성할 수 있습니다. 보다 구체적인 요소 선택 및 스타일 정의를 위해 CSS 선택기를 사용하면 선택기를 결합하고 중첩할 수도 있습니다.

위 내용은 일반적인 CSS 선택기 분류 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!