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

일반적으로 사용되는 CSS 선택기를 이해하려면 특정 코드 예제가 필요합니다.

CSS 선택기는 요소의 특정 속성, 태그 이름 또는 기타 조건을 일치시켜 스타일을 선택할 수 있는 방법입니다. 효율적인 CSS 스타일 시트를 작성하고 웹 페이지 구조를 관리하려면 일반적으로 사용되는 CSS 선택기에 대한 깊은 이해가 매우 중요합니다. 다음은 일반적으로 사용되는 CSS 선택기와 구체적인 코드 예제입니다.

1. 요소 선택기:

요소 선택기는 태그 이름으로 요소를 선택하는 가장 기본적인 선택기입니다.

코드 예:

p {
  color: red;
}

위 코드는 모든 <p></p> 요소의 텍스트 색상을 빨간색으로 설정합니다. <p></p> 元素的文本颜色设置为红色。

2. 类选择器（Class Selector）：

类选择器通过元素的class属性来选择元素。

代码示例：

.header {
  font-size: 20px;
}

以上代码将把所有class为 "header" 的元素的字体大小设置为 20 像素。

3. ID选择器（ID Selector）：

ID选择器通过元素的id属性来选择元素。

代码示例：

#container {
  width: 500px;
}

以上代码将把id为 "container" 的元素的宽度设置为 500 像素。

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

后代选择器通过元素的层级关系来选择元素。

代码示例：

.container p {
  color: blue;
}

以上代码将把所有在class为 "container" 的元素内部的 <p></p> 元素的文本颜色设置为蓝色。

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

子元素选择器通过元素的直接子元素关系来选择元素。

代码示例：

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

以上代码将把所有直接位于class为 "container" 的元素内部的 <p></p> 元素的字体加粗。

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

相邻兄弟选择器通过元素的相邻兄弟关系来选择元素。

代码示例：

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

以上代码将把紧接在 <h1></h1> 元素后面的 <p></p> 元素的上外边距设置为 10 像素。

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

伪类选择器通过元素的特定状态来选择元素，例如鼠标悬停、指定位置等。

代码示例：

a:hover {
  color: purple;
}

以上代码将把鼠标悬停在链接上时的文本颜色设置为紫色。

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

伪元素选择器用于选择元素的特定部分，例如元素的第一个字母、最后一个子元素等。

代码示例：

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

以上代码将把每个 <p></p>

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

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