필터 선택기란 무엇입니까?

필터 선택기에는 first-child, :last-child, :nth-child, :nth-last-child, :only-child, :not, :empty, :checked, :enabled, :disabled 및 :focus wait가 포함됩니다. . 자세한 소개: 1. :first-child, 상위 요소 아래의 첫 번째 하위 요소를 선택합니다. 2. :last-child, 상위 요소 아래의 마지막 하위 요소를 선택합니다.

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

웹 개발에서 필터 선택기는 특정 조건이나 규칙에 따라 DOM 요소를 필터링하고 선택하는 데 사용됩니다. 필터 선택기는 개발자가 필요에 따라 조작, 스타일 수정 또는 기타 처리를 위해 특정 요소를 선택하는 데 도움이 될 수 있습니다. 다음은 일반적인 필터 선택기입니다:

1. :first-child: 상위 요소 아래의 첫 번째 하위 요소를 선택합니다. 예를 들어, 모든 상위 요소 아래의 첫 번째 하위 요소를 선택합니다:

   :first-child {
     /* 样式 */
   }

2. :last-child: 상위 요소 아래의 마지막 하위 요소를 선택합니다. 예를 들어, 모든 상위 요소 아래에서 마지막 하위 요소를 선택합니다:

   :last-child {
     /* 样式 */
   }

3. :nth-child(n): 상위 요소 아래에서 n번째 하위 요소를 선택합니다. n 값은 특정 숫자나 공식을 사용하여 지정할 수 있습니다. 예를 들어 상위 요소 아래에서 세 번째 하위 요소를 선택합니다:

   :nth-child(3) {
     /* 样式 */
   }

4. :nth-last-child(n): 상위 요소 아래에서 n번째 하위 요소를 선택합니다. :nth-child와 마찬가지로 특정 숫자나 공식을 사용하여 n 값을 지정할 수 있습니다. 예를 들어 상위 요소 아래에서 마지막에서 두 번째 하위 요소를 선택합니다:

   :nth-last-child(2) {
     /* 样式 */
   }

5. :only-child: 상위 요소 아래의 유일한 하위 요소를 선택합니다. 예를 들어 모든 상위 요소 아래에서 하나의 하위 요소만 선택하는 경우:

   :only-child {
     /* 样式 */
   }

6. :not(selector): 지정된 선택기를 만족하지 않는 요소를 선택합니다. 다양한 선택기를 인수로 사용하여 특정 요소를 제외할 수 있습니다. 예를 들어 `` 태그가 아닌 모든 요소를 ​​선택합니다.

   :not(a) {
     /* 样式 */
   }

7. :empty: 하위 요소나 텍스트 콘텐츠가 없는 요소를 선택합니다. 예를 들어, 하위 요소가 없는 모든 요소를 ​​선택합니다:

   :empty {
     /* 样式 */
   }

8. :checked: 선택한 양식 요소(예: 체크박스 또는 라디오 버튼)를 선택합니다. 예를 들어, 선택된 체크박스를 모두 선택하세요:

   :checked {
     /* 样式 */
   }

9 :enabled 및 :disabled: 사용 가능하거나 사용할 수 없는 양식 요소를 선택하세요. 예를 들어, 사용 가능한 모든 입력 상자를 선택합니다:

   :enabled {
     /* 样式 */
   }

10:focus: 현재 초점이 맞춰진 요소를 선택합니다. 예를 들어 현재 포커스가 있는 입력 상자를 선택합니다.