CSS 코드에서 기본 선택기로 빠른 시작: 처음부터 선택기 분류 및 적용 알아보기
CSS(Cascading Style Sheets)는 HTML 문서의 스타일을 제어하는 데 사용되는 마크업 언어입니다. CSS에서는 스타일을 적용할 HTML 요소를 선택하는 데 선택기가 사용됩니다. 간단히 말해서 선택기는 CSS 스타일의 영향을 받는 HTML 요소를 지정하는 데 사용됩니다.
선택기에는 다양한 유형이 있으며 필요와 애플리케이션 시나리오에 따라 적절한 선택기를 선택할 수 있습니다. 이 기사에서는 독자가 CSS 코드를 빠르게 시작할 수 있도록 CSS 선택기의 기본 분류 및 적용을 처음부터 소개합니다.
요소 선택기는 HTML 요소의 태그명을 통해 해당 요소를 선택하는 가장 간단하고 기본적인 선택기입니다. 예를 들어 모든 단락 요소를 선택하려면 다음 선택기를 사용할 수 있습니다. 위 코드의
p { color: red; }
p
는 모든 <p> code>를 선택하는 요소 선택기입니다. 요소에 태그를 지정하고 텍스트 색상을 빨간색으로 설정합니다. <code>p
就是一个元素选择器,它选择了所有 <p></p>
标签的元素,并把它们的文本颜色设为红色。
类选择器是通过在HTML元素的class
属性中指定一个名称来选择元素。这种选择器使得我们可以选择具有相同类名的元素,并对它们应用相同的样式。例如,要选择所有具有类名为 highlight
的元素,可以使用如下的选择器:
.highlight { background-color: yellow; }
上述代码中的 .highlight
就是一个类选择器,它选择了所有具有 highlight
类名的元素,并将它们的背景色设置为黄色。
ID选择器是通过在HTML元素的id
属性中指定一个唯一的名称来选择元素。与类选择器不同,ID选择器只能选择一个元素,因为ID属性的值在一个HTML文档中必须是唯一的。例如,要选择ID为 header
的元素,可以使用如下的选择器:
#header { font-size: 24px; }
上述代码中的 #header
就是一个ID选择器,它选择了ID为 header
的元素,并将它们的字体大小设置为24像素。
后代选择器是通过选择HTML元素的后代元素来选择元素。后代元素是指被选元素的子元素、孙元素、曾孙元素等。例如,要选择所有 上述代码中的 直接子元素选择器是通过选择HTML元素的直接子元素来选择元素。直接子元素是指被选元素的直接子元素,而非其后代元素。例如,要选择所有 上述代码中的 클래스 선택기는 HTML 요소의 <p></p>
元素,可以使用如下的选择器:div p {
font-weight: bold;
}
div p
就是一个后代选择器,它选择了所有 <p></p>
元素,并将它们的字体设置为粗体。<p></p>
,可以使用如下的选择器:div > p {
color: blue;
}
div > p
就是一个直接子元素选择器,它选择了所有 <p></p>
클래스 선택기<p></p>
class
속성에 이름을 지정하여 요소를 선택합니다. 이 선택기를 사용하면 동일한 클래스 이름을 가진 요소를 선택하고 동일한 스타일을 적용할 수 있습니다. 예를 들어 클래스 이름이 highlight
인 모든 요소를 선택하려면 다음 선택기를 사용할 수 있습니다. 위 코드에서 .highlight
는 클래스 선택기입니다. 클래스 이름이 highlight
인 요소가 선택되고 배경색이 노란색으로 설정됩니다. 🎜🎜ID 선택기 🎜🎜🎜ID 선택기는 HTML 요소의
id
속성에 고유한 이름을 지정하여 요소를 선택합니다. 클래스 선택자와 달리 ID 선택자는 ID 속성 값이 HTML 문서 내에서 고유해야 하기 때문에 하나의 요소만 선택할 수 있습니다. 예를 들어 ID가 header
인 요소를 선택하려면 다음 선택기를 사용할 수 있습니다. 위 코드에서 🎜rrreee🎜#header
는 ID 선택기입니다. header
요소의 ID를 지정하고 해당 글꼴 크기를 24픽셀로 설정합니다. 🎜🎜Descendant 선택기🎜🎜🎜Descendant 선택기는 HTML 요소의 하위 요소를 선택하여 요소를 선택합니다. 자손 요소는 선택된 요소의 자식 요소, 손자 요소, 증손자 요소 등을 의미합니다. 예를 들어 모든
<p></p>
요소를 선택하려면 위의 🎜rrreee🎜div 선택기를 사용할 수 있습니다. code p
는 <p></p>
요소를 선택하고 해당 글꼴을 굵은 본문으로 설정하는 하위 선택기입니다. 🎜🎜직접 하위 요소 선택기 🎜🎜🎜직접 하위 요소 선택기는 HTML 요소의 직접 하위 요소를 선택하여 요소를 선택합니다. 직접 하위 요소는 해당 하위 요소가 아닌 선택한 요소의 직접 하위 요소를 참조합니다. 예를 들어, 직계 하위 요소인
<p></p>
인 모든 <p></p>
를 선택하는 직접 하위 요소 선택기입니다. 텍스트 색상은 파란색으로 설정되어 있습니다. 🎜🎜위의 5가지 기본 선택자 외에도 의사 클래스 선택자, 속성 선택자 등 요소를 선택하는 데 사용할 수 있는 선택자 유형도 더 많습니다. 이러한 선택기의 분류와 적용을 이해하고 익히면 HTML 요소의 스타일을 더 잘 제어하는 데 도움이 될 수 있습니다. 🎜🎜요약하자면 CSS 선택자를 학습하고 적용함으로써 HTML 요소의 스타일을 유연하게 제어 및 관리할 수 있고 다양한 웹 페이지 레이아웃과 디자인을 얻을 수 있습니다. 이 기사가 독자들이 CSS 코드를 빠르게 시작하고 웹 디자인 및 개발 능력을 향상시키는 데 도움이 되기를 바랍니다. 🎜
위 내용은 CSS 코드의 기본 선택기 알아보기: 선택기 분류 및 적용을 처음부터 배우는 빠른 시작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!