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 코드는 다음과 같습니다.

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!