조합 선택자는 무엇입니까?

결합 선택자에는 하위 선택자, 하위 요소 선택자, 인접 형제 선택자, 보편적 형제 선택자, 그룹 선택자, 교차 선택자, 하위 선택자, 의사 클래스 선택자, 의사 요소 선택자 등이 포함됩니다. 자세한 소개: 1. 하위 요소 선택기는 요소의 하위 요소를 선택하여 요소를 일치시킵니다. 공백을 사용하여 요소 간의 관계를 나타냅니다. 2. 하위 요소 선택기는 요소의 직접 하위 요소를 선택하여 요소를 일치시킵니다. > ";" 기호는 요소 간의 관계를 나타냅니다. 3. 인접한 형제 선택자는 요소의 다음 형제 요소를 선택하는 등의 방식으로 요소를 일치시킵니다.

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

CSS에서 선택기 결합은 여러 선택기를 결합하여 특정 요소를 선택하는 방법입니다. 선택기를 결합하면 스타일을 지정해야 하는 요소를 보다 정확하게 선택할 수 있습니다. 아래에서는 몇 가지 일반적인 조합 선택기를 소개합니다.

1. 하위 선택기:

하위 선택기는 하위 요소를 선택하여 요소를 일치시킵니다. 공백을 사용하여 요소 간의 관계를 나타냅니다. 예를 들어

요소 내에 있는 모든

요소를 선택하려면 다음 선택기를 사용할 수 있습니다.

     div  p

2. 하위 선택기:

하위 선택기는 요소의 직접 하위를 선택합니다. 요소를 일치시킵니다. 요소 간의 관계를 나타내기 위해 ">" 기호를 사용합니다. 예를 들어

요소 내에서 모든

요소를 선택하려면 다음 선택기를 사용할 수 있습니다.

     div  >  p

3 인접 형제 선택기:

인접 형제 선택기는 일치하는 요소의 다음 형제를 선택합니다. 요소. 요소 간의 관계를 나타내기 위해 "+" 기호를 사용합니다. 예를 들어,

요소 뒤에 있는 모든

요소를 선택하려면 다음 선택기를 사용할 수 있습니다.

     h1  +  p

4. 일반 형제 선택기:

일반 형제 선택기는 요소와 일치하는 모든 요소를 ​​선택합니다. . 요소 간의 관계를 나타내기 위해 "~" 기호를 사용합니다. 예를 들어,

요소 뒤에 있는 모든

요소를 선택하려면 다음 선택기를 사용할 수 있습니다:

     h1  ~  p

5. 그룹 선택기:

그룹 선택기는 여러 선택 항목을 쉼표 선택기와 결합합니다. 선택기 중 하나와 일치하는 모든 요소를 ​​선택합니다. 예를 들어 모든

요소와

요소를 선택하려면 다음 선택기를 사용할 수 있습니다.

     h1,  p

6. 교차 선택기:

교차 선택기는 여러 선택기를 동시에 충족하여 요소를 일치시킵니다. 공백을 사용하여 여러 선택기를 그룹화합니다. 예를 들어 클래스가 "red"와 "bold"인 모든 요소를 ​​선택하려면 다음 선택기를 사용할 수 있습니다:

     .red.bold

7. 하위 선택기:

하위 선택기는 요소 요소의 하위 요소를 선택하여 일치합니다. 요소 간의 관계를 나타내기 위해 ">" 기호를 사용합니다. 예를 들어

요소 내에 있는 모든 직접 하위 요소를 선택하려면 다음 선택기를 사용할 수 있습니다.

     div  >  p

8 의사 클래스 선택기는 선택 A에 사용됩니다. 요소의 특정 상태 또는 위치. 콜론 ":"으로 시작하고 선택기 끝에 추가됩니다. 예를 들어 마우스 오버 상태에서 모든 요소를 선택하려면 다음 선택기를 사용할 수 있습니다.

     a:hover

9. 의사 요소 선택기:

의사 요소 선택기는 요소의 특정 부분을 선택하는 데 사용됩니다. 생성된 콘텐츠. 이중 콜론 "::"으로 시작하고 선택기 끝에 추가됩니다. 예를 들어, 각 단락의 첫 번째 단어를 선택하려면 다음 선택기를 사용할 수 있습니다.

     p::first-letter

다음은 보다 정확하게 스타일을 지정해야 하는 요소를 선택하는 데 도움이 될 수 있는 몇 가지 일반적인 조합 선택기입니다. 이러한 결합된 선택기를 유연하게 사용하면 페이지 스타일을 더 잘 제어하고 사용자 지정할 수 있습니다. 결합 선택기에 대한 이 소개가 CSS를 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

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