의사 클래스 선택자는 무엇입니까?

의사 클래스 선택기에는 hover, :active, :focus, :visited, :link, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :n번째 유형(n), :n번째 마지막 유형(n), :not(selector), :empty, :checked, :disabled 등

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

의사 클래스 선택기는 요소의 특정 상태나 조건을 선택하는 데 사용되는 CSS의 강력한 선택기입니다. 의사 클래스 선택자는 콜론(:)으로 시작하며 마우스 가리키기, 방문한 링크, 요소 위치 등과 같은 다양한 요소 상태를 선택하는 데 사용됩니다. 다음은 CSS의 일반적인 의사 클래스 선택기입니다:

1. :hover: 요소 위로 마우스를 가져갈 때의 상태를 선택합니다. 마우스 포인터를 요소 위로 가져가면 특정 스타일이 요소에 적용될 수 있습니다.

2. :active: 요소가 활성화되거나 눌러진 상태를 선택합니다. 사용자가 마우스 버튼을 클릭하거나 누를 때 특정 스타일이 요소에 적용될 수 있습니다.

3. :focus: 현재 포커스를 받고 있는 요소를 선택합니다. 요소를 선택하거나 포커스가 있을 때 특정 스타일을 요소에 적용할 수 있습니다.

4. :visited: 방문한 링크를 선택하세요. 사용자가 링크를 방문하면 링크에 특정 스타일을 적용할 수 있습니다.

5. :link: 방문하지 않은 링크를 선택하세요. 방문하지 않은 링크를 선택하는 데 사용되는 :visited 의사 클래스에 해당합니다.

6. :first-child: 요소의 첫 번째 하위 요소를 선택합니다. 특정 스타일은 해당 요소가 상위 요소의 첫 번째 하위인 경우 요소에 적용될 수 있습니다.

7. :last-child: 요소의 마지막 하위 요소를 선택합니다. 요소가 상위 요소의 마지막 하위 요소인 경우 특정 스타일을 해당 요소에 적용할 수 있습니다.

8. :nth-child(n): 요소의 n번째 하위 요소를 선택합니다. 특정 스타일은 해당 요소가 상위 요소의 n번째 하위 요소인 경우 적용할 수 있습니다. 여기서 n은 특정 숫자, 키워드(예: 짝수, 홀수) 또는 표현식(예: 2n, 3n+1)일 수 있습니다.

9. :nth-last-child(n): 요소 하단에서 n번째 하위 요소를 선택합니다. 특정 스타일은 요소가 상위 요소의 맨 아래에서 n번째 하위 요소인 경우 적용할 수 있습니다.

10. :nth-of-type(n): 같은 유형의 요소 중 n번째 요소를 선택합니다. 해당 유형의 n번째 요소인 경우 특정 스타일을 해당 요소에 적용할 수 있습니다.

11. :nth-last-of-type(n): 같은 유형의 요소 중 마지막에서 n번째 요소를 선택합니다. 해당 유형의 마지막 요소에서 n번째 요소인 경우 해당 요소에 특정 스타일을 적용할 수 있습니다.

12. :not(selector): 특정 선택기와 일치하지 않는 요소를 선택합니다. 이 의사 선택기를 사용하면 특정 요소를 제외하고 스타일을 적용할 다른 요소를 선택할 수 있습니다.

13. :empty: 하위 요소가 없는 요소를 선택합니다. 하위 요소가 없는 경우 요소에 특정 스타일을 적용할 수 있습니다.

14. :checked: 선택한 양식 요소를 선택합니다. 체크박스, 라디오 버튼, 드롭다운 목록과 같은 양식 요소에 적용됩니다.

15. :disabled: 비활성화된 양식 요소를 선택합니다. 양식 요소가 비활성화되면 특정 스타일이 요소에 적용될 수 있습니다.

위는 CSS의 일반적인 의사 클래스 선택기로서 요소의 상태에 따라 웹 페이지의 요소를 선택하고 스타일을 지정할 수 있습니다. 이러한 의사 클래스 선택기를 합리적으로 사용하면 풍부하고 다양한 효과를 얻을 수 있으며 사용자 경험과 페이지 가독성을 향상시킬 수 있습니다.

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