CSS 선택기를 사용하는 방법

CSS(Cascading Style Sheets) 선택기는 HTML 요소를 선택하는 도구입니다. CSS 선택기를 사용하면 유형, 속성, ID 또는 클래스를 기반으로 HTML 요소의 스타일을 지정할 수 있습니다. 선택기는 CSS의 기초이며 이를 마스터하는 것은 CSS를 마스터하는 데 중요한 단계입니다.

이 글에서는 일반적으로 사용되는 CSS 선택자와 사용법을 소개합니다. 시작하기 전에 몇 가지 기본 지식을 이해해야 합니다.

1. CSS 선택기 구문: 선택기는 HTML 요소를 가리키고 그 뒤에 중괄호 쌍 {}이 옵니다. 세미콜론으로 구분됩니다.
2. HTML 요소는 태그 이름, 클래스 이름(id) 및 속성을 선택기로 사용할 수 있습니다.
3. 요소는 공백으로 구분된 여러 클래스 이름을 가질 수 있습니다.
4. ID 및 클래스 이름은 숫자로 시작하지 않거나 특수 문자를 포함하지 않는 등 명명 규칙을 따라야 합니다.

이제 여러 CSS 선택기와 사용 방법에 대해 자세히 알아 보겠습니다.

1. 태그 선택기

태그 선택기는 가장 간단한 CSS 선택기입니다. HTML 요소의 태그 이름을 사용하여 스타일을 설정합니다. 태그 선택기는 이 태그의 모든 요소에 적용됩니다.

예를 들어 모든 단락(p)에 빨간색 텍스트 색상을 설정하려면 다음 코드를 사용할 수 있습니다.

p {
  color: red;
}

2. 클래스 선택기

클래스 선택기는 태그에 클래스 이름을 추가하여 요소를 선택합니다. 클래스 이름은 "." 기호로 시작됩니다.

예를 들어 다음 코드는 "my-class" 클래스 이름을 사용하여 모든 요소에 대해 텍스트 색상을 빨간색으로 설정합니다.

.my-class {
  color: red;
}

HTML에서는 클래스 속성을 모든 요소에 적용할 수 있습니다. 예는 다음과 같습니다.

<div class="my-class">我是一个含有my-class类名的div元素</div>

3. ID Selector

ID Selector는 태그에 ID 이름을 추가하여 요소를 선택합니다. ID 이름은 "#" 기호로 시작됩니다.

예를 들어 다음 코드는 ID가 "my-id"인 요소의 텍스트 색상을 파란색으로 설정합니다.

#my-id {
  color: blue;
}

HTML에서 id 속성은 단일 요소에만 적용될 수 있습니다. 예는 다음과 같습니다.

<div id="my-id">我是一个含有my-id ID名称的div元素</div>

4. 속성 선택기

속성 선택기는 HTML 요소의 속성을 기반으로 스타일을 설정합니다. 대괄호 []를 사용하여 요소의 속성에 액세스할 수 있습니다.

예를 들어 다음 코드는 "href" 속성이 있는 모든 요소에 대해 텍스트 색상을 녹색으로 설정합니다.

a[href] {
  color: green;
}

또한 속성 값을 사용하여 보다 세부적으로 스타일을 지정할 수 있습니다. 예를 들어, 다음 코드는 "href" 속성 값이 ".pdf"로 끝나는 모든 링크에 대해 텍스트 색상을 빨간색으로 설정합니다.

a[href$=".pdf"] {
  color: red;
}

위 코드에서 "$=" 기호는 속성 값이 다음으로 끝나는 것을 나타냅니다. 특정 값.

5. Descendant Selector

Descendant Selector는 상위 요소의 하위 요소를 선택하여 스타일을 설정합니다. 공백을 사용하여 각 태그 이름을 구분합니다.

예를 들어 다음 코드는 모든 div 요소의 a 요소를 녹색으로 설정합니다.

div a {
  color: green;
}

위 코드에서 공백 문자는 div 요소와 a 요소를 서로 연결합니다.

6. 교차점 선택기

교차점 선택기는 지정된 클래스 이름과 태그 이름을 모두 가진 요소를 선택합니다. "."과 태그 이름을 사용하여 정의됩니다.

예를 들어, 다음 코드는 "my-class" 클래스 이름과 "li" 태그 이름이 있는 모든 요소에 대해 텍스트 색상을 파란색으로 설정합니다.

li.my-class {
  color: blue;
}

위 코드에서 "li.my- class" 선택기에만 "li" 및 "my-class" 클래스 이름이 모두 있는 요소에 적용됩니다.

요약:

지금까지 우리는 일반적으로 사용되는 6가지 CSS 선택기에 대해 배웠습니다. 선택기를 이해하면 HTML 요소의 스타일을 더 잘 배치하고 개발하는 데 도움이 됩니다. 다양한 선택기에는 다양한 HTML 구조가 필요하므로 실제 필요에 따라 적절한 선택기를 선택해야 합니다.

CSS 선택기는 CSS에서 매우 중요한 지식 포인트이며 이를 숙달하는 것은 프런트엔드 개발자에게 매우 중요한 단계입니다. 이 기사가 도움이 되기를 바랍니다.

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