CSS 의사 클래스 및 의사 요소의 기본 개념과 사용 시나리오를 살펴보세요.

CSS 의사 클래스 및 의사 요소의 기본 개념과 적용 시나리오를 이해합니다.

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 설명하는 데 사용되는 마크업 언어로 요소의 모양과 레이아웃을 제어할 수 있습니다. 웹 페이지에서. CSS에서 의사 클래스와 의사 요소는 CSS의 응용 범위와 유연성을 더욱 확장할 수 있는 매우 유용한 기능입니다.

1. 의사 클래스

의사 클래스는 특정 상태 요소를 선택하는 데 사용되는 키워드입니다. 일반적인 의사 클래스에는 hover, active, focus 등이 포함됩니다. 다음은 몇 가지 일반적인 의사 클래스 사용의 예입니다.

1. :hover 의사 클래스

:hover 의사 클래스는 요소 위로 마우스를 가져가는 상태를 선택하는 데 사용됩니다.

a:hover { color: red; }

2. :active pseudo-class

:active pseudo-class는 클릭 시 요소의 상태를 선택하는 데 사용됩니다.

button:active { background-color: blue; }

3. :focus 의사 클래스

:focus 의사 클래스는 포커스된 입력 요소를 선택하는 데 사용됩니다.

input:focus { border: 2px solid red; }

2. 의사 요소

의사 요소는 해당 요소의 내용 앞이나 뒤에 특정 내용을 삽입하는 데 사용되는 키워드입니다. 일반적인 의사 요소에는 이전과 이후가 포함됩니다. 다음은 의사 요소 사용의 몇 가지 일반적인 예입니다.

1. ::before 의사 요소

::before 의사 요소는 요소의 콘텐츠 앞에 지정된 콘텐츠를 삽입하는 데 사용됩니다.

p::before { content: "before"; color: red; }

2. ::after 의사 요소

::after 의사 요소는 요소의 콘텐츠 뒤에 지정된 콘텐츠를 삽입하는 데 사용됩니다.

p::after { content: "after"; color: blue; }

3. 응용 시나리오

의사 클래스와 의사 요소에는 웹 페이지 스타일 디자인에 실용적인 응용 시나리오가 많이 있습니다. 다음은 의사 클래스 및 의사 요소의 사용을 설명하기 위한 일반적인 요구 사항을 예로 들어 설명합니다.

웹 페이지에 여러 탐색 링크가 있는 탐색 모음이 있다고 가정해 보겠습니다. 마우스를 위에 올리면 탐색 링크의 색상이 변경되고 탐색 링크 사이에 수직선 구분 기호를 추가하기를 원합니다.

HTML 코드는 다음과 같습니다.

 Home About Contact 

CSS 코드는 다음과 같습니다.

.nav a { color: black; text-decoration: none; padding: 10px; } .nav a:hover { color: red; } .nav a:not(:last-child)::after { content: "|"; padding-left: 10px; padding-right: 10px; color: gray; }

위 코드에서는 먼저 탐색 링크의 기본 색상과 스타일을 설정합니다. 그런 다음 :hover 가상 클래스 선택기를 사용하여 마우스를 탐색 링크 위로 가져가면 링크 색상이 빨간색으로 변경됩니다.

다음으로 :not 의사 클래스 선택기를 사용하여 마지막 탐색 링크를 제외한 다른 링크를 선택합니다. 그런 다음 ::after 의사 요소를 사용하여 각 링크 뒤에 파이프 구분 기호를 추가하고 구분 기호 스타일을 지정합니다.

위 코드를 사용하면 마우스를 가져갈 때 탐색 링크의 색상을 변경하고 링크 사이에 수직선 구분 기호를 추가하는 효과를 얻을 수 있습니다.

요약:

의사 클래스와 의사 요소는 CSS에서 매우 중요한 역할을 하며 보다 유연하고 복잡한 스타일 효과를 달성하는 데 도움이 될 수 있습니다. 의사 클래스와 의사 요소를 적절하게 적용함으로써 웹 페이지 스타일을 더 잘 제어하고 사용자 경험을 향상시킬 수 있습니다. 위의 예는 그 중 하나일 뿐입니다. 실제로 실제 개발에서 지속적인 탐색과 연습이 필요한 의사 클래스 및 의사 요소에 대한 더 많은 응용 시나리오가 있습니다.

위 내용은 CSS 의사 클래스 및 의사 요소의 기본 개념과 사용 시나리오를 살펴보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!