简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 일반적인 문제 > 본문

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

百草
풀어 주다： 2023-10-07 13:18:29
원래의
1533명이 탐색했습니다.

결합 선택자에는 하위 선택자, 하위 요소 선택자, 인접 형제 선택자, 보편적 형제 선택자, 그룹 선택자, 교차 선택자, 하위 선택자, 의사 클래스 선택자, 의사 요소 선택자 등이 포함됩니다. 자세한 소개: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：인터치 리포트 제작방법 다음 기사：숫자 선택기란 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
MySQL 테이블에 여러 행을 삽입하고 새 ID를 반환하는 방법은 무엇입니까? 일반적으로 MySQL 테이블에 행을 삽입하고 last_insert_id를 얻을 수 있습니다. 하지만 이제는 테이블에 많은 행을 대량 삽입하고 ID 배열을 가져오고...
에서 2024-04-06 10:03:44
0
2
294
그룹화된 결과를 얻으려면 올바른 데이터베이스 행을 선택하세요. 특정 게임에 대해 각 사용자의 최고 점수를 선택하고 싶습니다. 현재 쿼리에서는 ID가 1인 Skill_game 결과의 점수, 날짜_저장된 이름 및 사용자 이름을 ...
에서 2024-04-05 10:37:31
0
1
407
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！