다양한 요소 속성, 구조적 관계 또는 상태를 기반으로 요소를 선택할 수 있는 다양한 유형의 CSS3 선택기가 있습니다. 다음은 일반적으로 사용되는 몇 가지 CSS3 선택기 유형을 소개하고 특정 코드 예제를 제공합니다.
요소 선택기: 요소 이름을 선택기로 사용합니다. 예를 들어 p 요소는 다음과 같습니다.
p { color: red; }
클래스 선택기: 다음으로 시작하는 클래스 이름을 선택기로 사용합니다. , 여기서는 클래스가 example인 요소를 예로 사용합니다.
.example { font-size: 16px; }
ID 선택기: #으로 시작하는 ID를 선택기로 사용합니다. 여기서는 ID가 title인 요소를 예로 사용합니다.
#title { font-weight: bold; }
[attr]: 지정된 속성이 있는 요소를 선택합니다. 여기에서는 데이터 속성이 있는 요소를 예로 사용합니다.
[data] { background-color: yellow; }
[attr=value]: 지정된 속성과 값이 있는 요소를 선택합니다. 데이터 속성 값을 사용합니다. 예제의 요소를 예로 들어 보겠습니다.
[data="example"] { color: blue; }
[attr^=value]: 지정된 값으로 시작하는 속성 값이 있는 요소를 선택합니다. 여기서는 데이터 속성 값이 다음으로 시작하는 요소를 선택합니다. "test" 예:
[data^="test"] { text-decoration: underline; }
:nth-child(n): 상위 요소의 n번째 하위 요소를 선택합니다. 여기서는 상위 요소의 세 번째 하위 요소를 선택합니다. 예:
.parent :nth-child(3) { background-color: green; }
:first-child: 상위 요소의 첫 번째 하위 요소를 선택합니다. 여기서는 상위 요소의 첫 번째 하위 요소를 예로 들어 보겠습니다.
.parent :first-child { font-style: italic; }
:hover: 마우스를 올렸을 때 요소를 선택합니다. 요소의 상태는 다음과 같습니다. 요소를 가리키면 배경색을 변경하는 예입니다.
.example:hover { background-color: orange; }
:active: 마우스를 올렸을 때 상태를 선택합니다. 요소가 활성화되면 다음은 요소를 클릭할 때 텍스트 색상을 변경하는 예입니다.
.example:active { color: purple; }
위는 개발자가 요소의 스타일을 보다 유연하게 선택하고 제어하는 데 도움이 될 수 있는 CSS3 선택기의 일부 유형 및 코드 예입니다. 그 페이지. 이러한 선택기를 마스터하면 페이지 개발 효율성과 사용자 경험을 효과적으로 향상시킬 수 있습니다.
위 내용은 다양한 종류의 CSS3 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!