> 웹 프론트엔드 > CSS 튜토리얼 > 일반적인 CSS 선택기 분류 개요

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

PHPz
풀어 주다: 2024-01-13 14:40:16
원래의
1177명이 탐색했습니다.

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

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

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

  1. 요소 선택기
    요소 선택기는 가장 일반적인 CSS 선택기입니다. 태그 이름을 선택하여 요소를 선택합니다. 예를 들어 모든 단락 요소를 선택하려면 다음 스타일을 사용할 수 있습니다.
p {
  color: blue;
}
로그인 후 복사
  1. 클래스 선택기(클래스 선택기)
    클래스 선택기는 HTML 요소에 클래스 속성을 추가하고 마침표를 사용하여 식별합니다. 문서의 여러 요소에 동일한 스타일을 적용할 수 있습니다. 예는 다음과 같습니다.
.button {
  background-color: red;
}
로그인 후 복사

HTML에서 사용하는 방법:

<button class="button">Click me</button>
로그인 후 복사
  1. ID 선택기(ID 선택기)
    ID 선택기는 HTML 요소에 id 속성을 추가하고 파운드 기호를 사용하여 식별합니다. 하나의 요소에만 특정 스타일을 적용해야 하는 상황에 적합합니다. 코드 예시는 다음과 같습니다. HTML에서
#header {
  background-color: yellow;
}
로그인 후 복사

사용 방법:

<header id="header">This is the header</header>
로그인 후 복사
  1. 자식 선택기(자식 선택기)
    자식 선택기는 요소의 직접 하위 요소를 선택할 수 있습니다. 이는 보다 큼 기호(>)로 식별됩니다. 다음 코드는 모든 단락 요소의 직접 하위 요소 범위를 선택하고 글꼴 색상을 빨간색으로 설정합니다.
p > span {
  color: red;
}
로그인 후 복사
<p>This is a <span>red</span> text.</p>
로그인 후 복사
  1. Descendant Selector(Descendant Selector)
    Descendant 선택기는 요소의 모든 하위 요소를 선택할 수 있습니다. 공백을 사용하여 표현됩니다. 다음 코드는 모든 단락 요소 내의 범위 요소를 선택하고 배경색을 회색으로 설정합니다.
p span {
  background-color: gray;
}
로그인 후 복사
<p>This is a <span>gray</span> text.</p>
로그인 후 복사
  1. Adjacent Sibling Selector(Adjacent Sibling Selector)
    Adjacent Sibling Selector는 요소 바로 뒤에 있는 형제 요소를 선택할 수 있습니다. 더하기 기호(+)로 식별됩니다. 다음 코드는 모든 h2 요소 바로 뒤에 있는 p 요소를 선택하고 글꼴 색상을 파란색으로 설정합니다.
h2 + p {
  color: blue;
}
로그인 후 복사
<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>
로그인 후 복사
  1. 범용 선택기(Universal Selector)
    범용 선택기는 HTML 문서의 모든 요소를 ​​선택할 수 있습니다. 별표(*)로 표시됩니다. 다음 코드는 페이지의 모든 요소를 ​​선택하고 테두리를 1픽셀로 설정합니다.
* {
  border: 1px solid black;
}
로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿