CSS 코드의 기본 선택기 알아보기: 선택기 분류 및 적용을 처음부터 배우는 빠른 시작

<p>

<p>CSS 코드에서 기본 선택기로 빠른 시작: 처음부터 선택기 분류 및 적용 알아보기

<p>CSS(Cascading Style Sheets)는 HTML 문서의 스타일을 제어하는 ​​데 사용되는 마크업 언어입니다. CSS에서는 스타일을 적용할 HTML 요소를 선택하는 데 선택기가 사용됩니다. 간단히 말해서 선택기는 CSS 스타일의 영향을 받는 HTML 요소를 지정하는 데 사용됩니다.

<p>선택기에는 다양한 유형이 있으며 필요와 애플리케이션 시나리오에 따라 적절한 선택기를 선택할 수 있습니다. 이 기사에서는 독자가 CSS 코드를 빠르게 시작할 수 있도록 CSS 선택기의 기본 분류 및 적용을 처음부터 소개합니다.

1. 요소 선택기

<p>요소 선택기는 HTML 요소의 태그명을 통해 해당 요소를 선택하는 가장 간단하고 기본적인 선택기입니다. 예를 들어 모든 단락 요소를 선택하려면 다음 선택기를 사용할 수 있습니다. 위 코드의

p {
    color: red;
}

<p>p는 모든 <p></ code>를 선택하는 요소 선택기입니다. 요소에 태그를 지정하고 텍스트 색상을 빨간색으로 설정합니다. <code>p 就是一个元素选择器，它选择了所有 <p> 标签的元素，并把它们的文本颜色设为红色。

2. 类选择器

<p>类选择器是通过在HTML元素的class属性中指定一个名称来选择元素。这种选择器使得我们可以选择具有相同类名的元素，并对它们应用相同的样式。例如，要选择所有具有类名为 highlight 的元素，可以使用如下的选择器：

.highlight {
    background-color: yellow;
}

<p>上述代码中的 .highlight 就是一个类选择器，它选择了所有具有 highlight 类名的元素，并将它们的背景色设置为黄色。

3. ID选择器

<p>ID选择器是通过在HTML元素的id属性中指定一个唯一的名称来选择元素。与类选择器不同，ID选择器只能选择一个元素，因为ID属性的值在一个HTML文档中必须是唯一的。例如，要选择ID为 header 的元素，可以使用如下的选择器：

#header {
    font-size: 24px;
}

<p>上述代码中的 #header 就是一个ID选择器，它选择了ID为 header 的元素，并将它们的字体大小设置为24像素。

4. 后代选择器

<p>后代选择器是通过选择HTML元素的后代元素来选择元素。后代元素是指被选元素的子元素、孙元素、曾孙元素等。例如，要选择所有 <div> 元素下的 <p> 元素，可以使用如下的选择器：

div p {
    font-weight: bold;
}

<p>上述代码中的 div p 就是一个后代选择器，它选择了所有 <div> 元素下的 <p> 元素，并将它们的字体设置为粗体。

5. 直接子元素选择器

<p>直接子元素选择器是通过选择HTML元素的直接子元素来选择元素。直接子元素是指被选元素的直接子元素，而非其后代元素。例如，要选择所有 <div> 元素的直接子元素 <p>，可以使用如下的选择器：

div > p {
    color: blue;
}

<p>上述代码中的 div > p 就是一个直接子元素选择器，它选择了所有 <div> 元素的直接子元素 <p>

클래스 선택기<p>
<p> 클래스 선택기는 HTML 요소의 class 속성에 이름을 지정하여 요소를 선택합니다. 이 선택기를 사용하면 동일한 클래스 이름을 가진 요소를 선택하고 동일한 스타일을 적용할 수 있습니다. 예를 들어 클래스 이름이 highlight인 모든 요소를 ​​선택하려면 다음 선택기를 사용할 수 있습니다. 위 코드에서
rrreee🎜.highlight는 클래스 선택기입니다. 클래스 이름이 highlight인 요소가 선택되고 배경색이 노란색으로 설정됩니다. 🎜
🎜ID 선택기 🎜🎜🎜ID 선택기는 HTML 요소의 id 속성에 고유한 이름을 지정하여 요소를 선택합니다. 클래스 선택자와 달리 ID 선택자는 ID 속성 값이 HTML 문서 내에서 고유해야 하기 때문에 하나의 요소만 선택할 수 있습니다. 예를 들어 ID가 header인 요소를 선택하려면 다음 선택기를 사용할 수 있습니다. 위 코드에서 🎜rrreee🎜#header는 ID 선택기입니다. header 요소의 ID를 지정하고 해당 글꼴 크기를 24픽셀로 설정합니다. 🎜
🎜Descendant 선택기🎜🎜🎜Descendant 선택기는 HTML 요소의 하위 요소를 선택하여 요소를 선택합니다. 자손 요소는 선택된 요소의 자식 요소, 손자 요소, 증손자 요소 등을 의미합니다. 예를 들어 모든 <div> 요소 아래의 모든 <p>
요소를 선택하려면 위의 🎜rrreee🎜div 선택기를 사용할 수 있습니다. code p는 <div> 요소 아래의 모든 <p>
요소를 선택하고 해당 글꼴을 굵은 본문으로 설정하는 하위 선택기입니다. 🎜
🎜직접 하위 요소 선택기 🎜🎜🎜직접 하위 요소 선택기는 HTML 요소의 직접 하위 요소를 선택하여 요소를 선택합니다. 직접 하위 요소는 해당 하위 요소가 아닌 선택한 요소의 직접 하위 요소를 참조합니다. 예를 들어, 직계 하위 요소인 <p>
인 모든 <div> 요소를 선택하려면 다음 선택기를 사용할 수 있습니다. 위의 코드 div > p는 모든 <div> 요소의 모든 직접 하위 요소 <p>
를 선택하는 직접 하위 요소 선택기입니다. 텍스트 색상은 파란색으로 설정되어 있습니다. 🎜🎜위의 5가지 기본 선택자 외에도 의사 클래스 선택자, 속성 선택자 등 요소를 선택하는 데 사용할 수 있는 선택자 유형도 더 많습니다. 이러한 선택기의 분류와 적용을 이해하고 익히면 HTML 요소의 스타일을 더 잘 제어하는 ​​데 도움이 될 수 있습니다. 🎜🎜요약하자면 CSS 선택자를 학습하고 적용함으로써 HTML 요소의 스타일을 유연하게 제어 및 관리할 수 있고 다양한 웹 페이지 레이아웃과 디자인을 얻을 수 있습니다. 이 기사가 독자들이 CSS 코드를 빠르게 시작하고 웹 디자인 및 개발 능력을 향상시키는 데 도움이 되기를 바랍니다. 🎜