CSS 선택기 란 무엇입니까?-프런트엔드 Q&A-php.cn

CSS 선택기 란 무엇입니까?

PHPz

풀어 주다： 2023-05-27 14:43:08

원래의

945명이 탐색했습니다.

CSS(Cascading Style Sheets)는 웹 디자인에서 일반적으로 사용되는 언어로 웹 요소의 스타일과 레이아웃을 정의하여 웹 페이지를 더 아름답고 읽기 쉽게 만드는 데 주로 사용됩니다. CSS에서 선택기는 스타일을 적용해야 하는 HTML 요소를 선택하는 메커니즘입니다. 이번 글에서는 CSS 선택자가 무엇인지, 어떻게 사용하는지 살펴보겠습니다.

1. CSS 선택자란 무엇입니까?

먼저 CSS 선택자가 무엇인지 이해해야 합니다. CSS 선택자는 HTML 요소를 선택하기 위한 패턴을 나타냅니다. CSS 선택자는 CSS에 적용할 HTML 요소를 정의하는 요소, 클래스, ID, 속성 등이 될 수 있으며, 이를 통해 CSS 스타일이 지정된 요소에 정확하게 적용될 수 있습니다.

예를 들어 다음 HTML 코드에서는 CSS 선택기를 사용하여 h1 요소를 선택할 수 있습니다.

<!doctype html>
<html>
<head>
  <title>My Example Webpage</title>
  <style>
    h1 {
      color: blue;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

로그인 후 복사

이 예에서는 다음 CSS 선택기를 사용하여 h1 요소를 선택합니다.

h1 {
  color: blue;
  font-family: Arial, sans-serif;
}

로그인 후 복사

이런 식으로 , h1 요소의 색상 및 글꼴과 같은 스타일 속성을 제어하고 파란색으로 표시되도록 할 수 있습니다.

2. 일반적인 CSS 선택기

다음은 CSS 선택기의 몇 가지 예입니다.

요소 선택기

요소 선택기는 HTML 요소를 직접 선택하는 데 사용되는 선택기입니다. 예를 들어, 다음 코드를 사용하여 모든 단락 요소를 선택할 수 있습니다:

p {
  color: black;
}

로그인 후 복사

이러한 방식으로 모든 단락 요소를 검은색 글꼴로 변경할 수 있습니다.

클래스 선택기

클래스 선택기는 클래스 이름을 사용하여 HTML 요소를 선택하는 선택기입니다. 클래스 이름은 마침표(.)로 시작하는 문자열입니다. 예를 들어, 다음 코드를 사용하여 클래스 이름이 "highlight"인 모든 HTML 요소를 선택할 수 있습니다.

.highlight {
  background-color: yellow;
}

로그인 후 복사

이러한 방식으로 이러한 요소의 배경색을 노란색으로 변경할 수 있습니다.

ID 선택기

ID 선택기는 ID 속성을 사용하여 HTML 요소를 선택하는 선택기입니다. ID 속성은 #으로 시작하는 문자열입니다. 예를 들어, 다음 코드를 사용하여 ID가 "header"인 HTML 요소를 선택할 수 있습니다.

#header {
  font-size: 24px;
}

로그인 후 복사

이 방법으로 헤더 요소의 글꼴 크기를 24픽셀로 설정할 수 있습니다.

Subselector

하위 선택기는 지정된 요소보다 한 수준 아래에 있는 하위 요소를 선택하는 선택기입니다. 하위 선택기는 ">" 기호로 표시됩니다. 예를 들어, 다음 코드를 사용하여 ID가 "container"인 요소 아래의 모든 직접 하위 요소 단락을 선택할 수 있습니다.

#container > p {
  margin-bottom: 10px;
}

로그인 후 복사

이러한 방식으로 모든 직접 하위 요소(예: 단락)의 아래쪽 여백을 설정할 수 있습니다. ID가 "container"인 요소 아래에는 10픽셀이 있습니다.

Descendant 선택자

후손 선택자는 지정된 요소 아래의 모든 하위 요소를 선택하는 선택자입니다. 하위 선택자는 공백 기호를 사용하여 표시됩니다. 예를 들어, 다음 코드를 사용하여 모든 div 요소 아래의 단락 요소를 선택할 수 있습니다.

div p {
  font-style: italic;
}

로그인 후 복사

이 방법으로 모든 div 요소 아래의 단락 글꼴을 기울임꼴로 변경할 수 있습니다.

3. 요약

CSS 선택기는 웹 페이지 요소의 스타일과 레이아웃을 제어하는 중요한 메커니즘입니다. 이 글에서는 일반적인 CSS 선택기 유형을 소개하고 이를 사용하는 방법에 대한 몇 가지 예를 제공합니다. CSS 선택기 사용법을 익히면 HTML 요소의 스타일과 레이아웃을 보다 정확하게 제어할 수 있어 더욱 아름답고 읽기 쉬운 웹 페이지를 만들 수 있습니다.

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