CSS 소스 선택기란 무엇입니까?

css 소스 선택기에는 요소 선택기, 클래스 선택기, ID 선택기, 속성 선택기, 의사 클래스 선택기, 의사 요소 선택기, 하위 요소 선택기, 하위 요소 선택기, 인접 형제 선택기 및 범용 선택기 등이 포함됩니다. 자세한 소개: 1. 요소 선택기, 요소 이름을 선택기로 사용하고 문서에서 요소 이름과 일치하는 모든 요소를 ​​선택합니다. 2. 클래스 선택기, 클래스 이름을 선택기로 사용하고 문서에서 동일한 클래스 이름을 가진 모든 요소를 ​​선택합니다. 문서, 클래스 이름은 점으로 시작합니다. 3. 요소의 고유 ID를 선택자로 사용하는 ID 선택자 등입니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 설명하는 데 사용되는 언어로, 웹 페이지 요소의 모양과 레이아웃을 제어할 수 있습니다. CSS에서는 스타일을 적용할 요소를 선택하는 데 선택기가 사용됩니다. CSS 선택자는 기본 선택자와 사용자 정의 선택자의 두 가지 유형으로 나눌 수 있습니다. 이 기사에서는 CSS의 원시 선택기에 중점을 둘 것입니다.

1. 요소 선택기: 요소 이름을 선택기로 사용하여 요소 이름과 일치하는 문서의 모든 요소를 ​​선택합니다. 예를 들어 p 선택기는 모든 단락 요소를 선택합니다.

2. 클래스 선택기: 클래스 이름을 선택기로 사용하여 문서에서 동일한 클래스 이름을 가진 모든 요소를 ​​선택합니다. 클래스 이름은 마침표(.)로 시작됩니다. 예를 들어, .red 선택기는 클래스 이름이 red인 모든 요소를 ​​선택합니다.

3. ID 선택기: 요소의 고유 ID를 선택기로 사용하여 문서에서 해당 ID를 가진 요소를 선택합니다. ID는 파운드 기호(#)로 시작합니다. 예를 들어 #header 선택기는 ID 헤더가 있는 요소를 선택합니다.

4. 속성 선택기: 요소의 속성을 선택기로 사용하여 문서에서 해당 속성이 있는 요소를 선택합니다. [속성] 선택기(지정된 속성을 가진 요소 선택), [속성=값] 선택기(지정된 속성 및 값을 가진 요소 선택) 등 다양한 형태의 속성 선택기가 있습니다.

5. 의사 클래스 선택기: 요소의 특정 상태를 선택기로 사용하여 문서에서 해당 상태의 요소를 선택합니다. 의사 클래스 선택자는 콜론(:)으로 시작합니다. 예를 들어, :hover 선택기는 마우스가 요소 위에 있을 때의 상태를 선택합니다.

6. 의사 요소 선택기: 요소의 특정 부분을 선택기로 사용하여 문서에서 해당 부분이 있는 요소를 선택합니다. 의사 요소 선택자는 이중 콜론(::)으로 시작합니다. 예를 들어 ::before 선택기는 요소 앞에 삽입된 콘텐츠를 선택합니다.

7. 하위 선택기: 공백으로 구분된 두 개의 선택기를 사용하여 문서에서 두 번째 선택기와 일치하고 첫 번째 선택기의 하위 항목인 요소를 선택합니다. 예를 들어 div p 선택기는 div 요소 내의 모든 단락 요소를 선택합니다.

8. 하위 선택기: 두 번째 선택기와 일치하는 문서의 요소를 선택하려면 보다 큼 기호(>)로 구분된 두 개의 선택기를 사용하세요. 해당 요소는 첫 번째 하위 요소의 직계 자손입니다. 예를 들어 div > p 선택기는 모든 div 요소의 직접적인 하위 요소인 단락 요소를 선택합니다.

9. 인접한 형제 선택기: 더하기 기호(+)로 구분된 두 개의 선택기를 사용하여 문서에서 두 번째 선택기와 일치하는 요소를 선택하고 요소는 장치 뒤의 첫 번째 선택 바로 뒤에옵니다. 예를 들어, h1 + p 선택기는 h1 요소 바로 뒤에 있는 단락 요소를 선택합니다.

10. 범용 선택기: 별표(*)를 선택기로 사용하여 문서의 모든 요소를 ​​선택하세요. 범용 선택기는 다른 선택기와 결합하여 특정 요소를 선택할 수 있습니다.

위는 CSS 소스 선택기의 주요 유형입니다. 선택기를 합리적으로 사용하면 웹 페이지의 요소 스타일을 정확하게 선택하고 제어할 수 있어 풍부하고 다양한 페이지 효과를 얻을 수 있습니다.

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