프런트엔드 의사 클래스 선택자는 무엇입니까?

프런트 엔드 의사 클래스 선택기에는 hover, :active, :focus, :first-child, :last-child, :nth-child(), :nth-of-type() 및 :not()이 포함됩니다. 등. 자세한 소개: 1. :hover 의사 클래스 선택기는 마우스가 요소 위에 있을 때 스타일을 적용하는 데 사용됩니다. 이는 마우스가 링크 위에 있을 때 색상이나 배경을 변경하는 등의 대화형 효과를 만드는 데 자주 사용됩니다. 2. :active pseudo-class 클래스 선택자는 요소가 활성화될 때 스타일을 적용하는 데 사용됩니다.

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

프런트 엔드 의사 클래스 선택기는 CSS에서 매우 중요한 부분으로, 요소의 상태나 위치에 따라 스타일을 선택하고 적용할 수 있게 해줍니다. 이 기사에서는 몇 가지 일반적인 프런트엔드 의사 클래스 선택기를 소개합니다.

1. :hover 의사 클래스 선택기

:hover 의사 클래스 선택기는 마우스를 요소 위로 가져갈 때 스타일을 적용하는 데 사용됩니다. 마우스를 링크 위로 가져갈 때 링크의 색상이나 배경이 변경되는 등 대화형 효과를 만드는 데 자주 사용됩니다.

예:

a:hover {
  color: blue;
}

2. :활성 의사 클래스 선택기

:활성 의사 클래스 선택기는 요소가 활성화될 때 스타일을 적용하는 데 사용됩니다. 사용자가 버튼을 클릭할 때 버튼의 색상이나 배경이 변경되는 등 버튼이나 링크에 대한 클릭 효과에 자주 사용됩니다.

예:

button:active {
  background-color: yellow;
}

3. :focus 의사 클래스 선택기

:focus 의사 클래스 선택기는 요소가 포커스를 받을 때 스타일을 적용하는 데 사용됩니다. 사용자가 클릭하면 입력 상자의 테두리 색상이나 배경이 변경되는 등 양식 요소에 자주 사용됩니다.

예:

input:focus {
  border-color: red;
}

4. :first-child 의사 클래스 선택기

:first-child 의사 클래스 선택기는 상위 요소의 첫 번째 하위 요소를 선택하는 데 사용됩니다. 목록의 첫 번째 요소에 특별한 스타일을 적용하는 데 자주 사용됩니다.

예:

ul li:first-child {
  font-weight: bold;
}

5. :last-child 의사 클래스 선택기

:last-child 의사 클래스 선택기는 상위 요소의 마지막 하위 요소를 선택하는 데 사용됩니다. 목록의 마지막 요소에 특별한 스타일을 적용하는 데 자주 사용됩니다.

예:

ul li:last-child {
  color: red;
}

6. :nth-child() 의사 클래스 선택기

:nth-child() 의사 클래스 선택기는 상위 요소의 특정 위치에서 하위 요소를 선택하는 데 사용됩니다. 선택할 하위 요소의 위치를 ​​지정하는 매개변수를 허용할 수 있습니다.

예:

ul li:nth-child(odd) {
  background-color: lightgray;
}

7. :nth-of-type() 의사 클래스 선택기

:nth-of-type() 의사 클래스 선택기는 특정 유형의 상위 요소의 하위 요소를 선택하는 데 사용됩니다. 선택할 하위 요소의 위치를 ​​지정하는 매개변수를 허용할 수 있습니다.

예:

ul li:nth-of-type(2n) {
  color: blue;
}

8. :not() 의사 클래스 선택기

:not() 의사 클래스 선택기는 지정된 조건을 충족하지 않는 요소를 선택하는 데 사용됩니다. 제외할 요소를 지정하는 매개변수를 허용할 수 있습니다.

예:

input:not([type="text"]) {
  display: none;
}

이것들은 프런트 엔드의 일반적인 의사 클래스 선택기로, 요소의 상태나 위치에 따라 스타일을 선택하고 적용하는 데 도움이 될 수 있습니다. 이러한 의사 클래스 선택기를 유연하게 사용하면 웹 페이지에 더 많은 대화형 효과와 개인화된 스타일을 추가할 수 있습니다.

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