>  기사  >  웹 프론트엔드  >  다양한 종류의 CSS3 선택기

다양한 종류의 CSS3 선택기

王林
王林원래의
2024-02-18 23:02:07974검색

다양한 종류의 CSS3 선택기

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

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

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

    .example {
      font-size: 16px;
    }
  • ID 선택기: #으로 시작하는 ID를 선택기로 사용합니다. 여기서는 ID가 title인 요소를 예로 사용합니다.

    #title {
      font-weight: bold;
    }
  1. 속성 선택기:
  • [attr]: 지정된 속성이 있는 요소를 선택합니다. 여기에서는 데이터 속성이 있는 요소를 예로 사용합니다.

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

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

    [data^="test"] {
      text-decoration: underline;
    }
  1. 구조적 선택기:
  • :nth-child(n): 상위 요소의 n번째 하위 요소를 선택합니다. 여기서는 상위 요소의 세 번째 하위 요소를 선택합니다. 예:

    .parent :nth-child(3) {
      background-color: green;
    }
  • :first-child: 상위 요소의 첫 번째 하위 요소를 선택합니다. 여기서는 상위 요소의 첫 번째 하위 요소를 예로 들어 보겠습니다.

    .parent :first-child {
      font-style: italic;
    }
  1. 의사 클래스 선택기:
  • :hover: 마우스를 올렸을 때 요소를 선택합니다. 요소의 상태는 다음과 같습니다. 요소를 가리키면 배경색을 변경하는 예입니다.

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

    .example:active {
      color: purple;
    }

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.