일반적인 CSS 선택자 알아보기

1. 요소 선택기:

p {
  color: red;
}

2. 类选择器（Class Selector）：

.header {
  font-size: 20px;
}

3. ID选择器（ID Selector）：

#container {
  width: 500px;
}

4. 后代选择器（Descendant Selector）：

.container p {
  color: blue;
}

5. 子元素选择器（Child Selector）：

.container > p {
  font-weight: bold;
}

6. 相邻兄弟选择器（Adjacent Sibling Selector）：

h1 + p {
  margin-top: 10px;
}

7. 伪类选择器（Pseudo-class Selector）：

a:hover {
  color: purple;
}

8. 伪元素选择器（Pseudo-element Selector）：

p::first-letter {
  font-size: 24px;
}

클래스 선택기: <p>
🎜클래스 선택기는 클래스 속성을 통해 요소를 선택합니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 "header" 클래스가 있는 모든 요소의 글꼴 크기를 20픽셀로 설정합니다. 🎜
🎜ID 선택기: 🎜🎜🎜ID 선택기는 id 속성을 통해 요소를 선택합니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 ID가 "container"인 요소의 너비를 500픽셀로 설정합니다. 🎜
🎜하위 항목 선택기: 🎜🎜🎜하위 항목 선택기는 계층 관계를 통해 요소를 선택합니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 "container" 클래스가 있는 요소 내의 모든 <p>
요소의 텍스트 색상을 파란색으로 설정합니다. 🎜
🎜하위 선택기: 🎜🎜🎜하위 선택기는 직접적인 하위 요소 관계를 통해 요소를 선택합니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 "컨테이너" 클래스가 있는 요소 내부에 직접 위치한 모든 <p>
요소의 글꼴을 굵게 표시합니다. 🎜
🎜인접 형제 선택기: 🎜🎜🎜인접 형제 선택기는 인접한 형제 관계를 통해 요소를 선택합니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 <h1> 요소 바로 뒤에 있는 <p>
요소의 상단 여백을 10픽셀로 설정합니다. 🎜
🎜의사 클래스 선택기: 🎜🎜🎜의사 클래스 선택기는 마우스 오버, 지정된 위치 등과 같은 요소의 특정 상태를 통해 요소를 선택합니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 링크 위로 마우스를 가져갈 때 텍스트 색상을 보라색으로 설정합니다. 🎜
🎜의사 요소 선택기: 🎜🎜🎜의사 요소 선택기는 요소의 첫 번째 문자, 마지막 하위 요소 등과 같은 요소의 특정 부분을 선택하는 데 사용됩니다. 🎜🎜코드 예: 🎜rrreee🎜위 코드는 각 <p>
요소의 첫 글자 글꼴 크기를 24픽셀로 설정합니다. 🎜🎜위는 일반적으로 사용되는 CSS 선택기와 해당 코드 예제입니다. 이러한 선택기를 이해하고 유연하게 사용하면 웹 페이지 요소의 스타일과 구조를 더 쉽게 제어할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 일반적인 CSS 선택자 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!