다양한 종류의 CSS3 선택기

다양한 요소 속성, 구조적 관계 또는 상태를 기반으로 요소를 선택할 수 있는 다양한 유형의 CSS3 선택기가 있습니다. 다음은 일반적으로 사용되는 몇 가지 CSS3 선택기 유형을 소개하고 특정 코드 예제를 제공합니다.

1. 기본 선택기:

• 요소 선택기: 요소 이름을 선택기로 사용합니다. 예를 들어 p 요소는 다음과 같습니다.

  p {
    color: red;
  }

• 클래스 선택기: 다음으로 시작하는 클래스 이름을 선택기로 사용합니다. , 여기서는 클래스가 example인 요소를 예로 사용합니다.

  .example {
    font-size: 16px;
  }

• ID 선택기: #으로 시작하는 ID를 선택기로 사용합니다. 여기서는 ID가 title인 요소를 예로 사용합니다.

  #title {
    font-weight: bold;
  }

2. 속성 선택기:

• [attr]: 지정된 속성이 있는 요소를 선택합니다. 여기에서는 데이터 속성이 있는 요소를 예로 사용합니다.

  [data] {
    background-color: yellow;
  }

• [attr=value]: 지정된 속성과 값이 있는 요소를 선택합니다. 데이터 속성 값을 사용합니다. 예제의 요소를 예로 들어 보겠습니다.

  [data="example"] {
    color: blue;
  }

• [attr^=value]: 지정된 값으로 시작하는 속성 값이 있는 요소를 선택합니다. 여기서는 데이터 속성 값이 다음으로 시작하는 요소를 선택합니다. "test" 예:

  [data^="test"] {
    text-decoration: underline;
  }

3. 구조적 선택기:

• :nth-child(n): 상위 요소의 n번째 하위 요소를 선택합니다. 여기서는 상위 요소의 세 번째 하위 요소를 선택합니다. 예:

  .parent :nth-child(3) {
    background-color: green;
  }

• :first-child: 상위 요소의 첫 번째 하위 요소를 선택합니다. 여기서는 상위 요소의 첫 번째 하위 요소를 예로 들어 보겠습니다.

  .parent :first-child {
    font-style: italic;
  }

4. 의사 클래스 선택기:

• :hover: 마우스를 올렸을 때 요소를 선택합니다. 요소의 상태는 다음과 같습니다. 요소를 가리키면 배경색을 변경하는 예입니다.

  .example:hover {
    background-color: orange;
  }

• :active: 마우스를 올렸을 때 상태를 선택합니다. 요소가 활성화되면 다음은 요소를 클릭할 때 텍스트 색상을 변경하는 예입니다.

  .example:active {
    color: purple;
  }

위는 개발자가 요소의 스타일을 보다 유연하게 선택하고 제어하는 ​​데 도움이 될 수 있는 CSS3 선택기의 일부 유형 및 코드 예입니다. 그 페이지. 이러한 선택기를 마스터하면 페이지 개발 효율성과 사용자 경험을 효과적으로 향상시킬 수 있습니다.

위 내용은 다양한 종류의 CSS3 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!