기본 CSS 선택기 구문을 익히려면 특정 코드 예제가 필요합니다. CSS 선택기는 프런트 엔드 개발에서 매우 중요한 부분이며 HTML 문서의 다양한 요소를 선택하고 수정하는 데 사용할 수 있습니다. 효율적인 스타일시트를 작성하려면 기본 CSS 선택기 구문을 익히는 것이 중요합니다. 이 문서에서는 몇 가지 일반적인 CSS 선택기와 해당 코드 예제를 소개합니다. 요소 선택기요소 선택기는 태그명을 통해 해당 요소를 선택할 수 있는 가장 기본적인 선택기입니다. 예를 들어, 모든 단락(p 요소)을 선택하려면 다음 코드를 사용할 수 있습니다: p { color: blue; } 클래스 선택기 클래스 선택기를 사용하면 HTML 요소에 하나 이상의 클래스 이름을 추가하고 클래스 이름으로 해당 요소를 선택할 수 있습니다. . 클래스 이름은 .로 시작합니다. 예를 들어 텍스트에 highlight라는 클래스를 추가합니다. .开头。例如，给文本添加一个名为highlight的类：.highlight { background-color: yellow; } ID选择器ID选择器允许给HTML元素添加一个唯一的ID，并通过ID来选择对应的元素。ID名以#开头。例如，给一个元素添加一个ID为header：#header { font-size: 24px; } 后代选择器后代选择器可以用来选择特定元素的后代元素。它使用空格将两个选择器连在一起。例如，选择所有#container下的p元素：#container p { color: red; } 子元素选择器子元素选择器可以选择特定元素的直接子元素。它使用>来将两个选择器连在一起。例如，选择所有#navigation下的直接子元素li：#navigation > li { display: inline; } 伪类选择器伪类选择器允许选择特定状态的元素，例如，悬停状态、访问状态等。伪类选择器以:开头。例如，选择悬停状态下的链接：a:hover { text-decoration: underline; } 相邻兄弟选择器相邻兄弟选择器可以选择紧接在另一个元素后的元素。它使用+来将两个选择器连在一起。例如，选择紧接在h1元素后的p元素：h1 + p { font-weight: bold; } 属性选择器属性选择器可以选择带有指定属性的元素，可以根据属性的值进行更精确的选择。属性选择器使用方括号[]来指定属性名和属性值。例如，选择所有带有target=_blanka[target="_blank"] { color: pink; } ID 선택기 ID 선택기를 사용하면 HTML 요소에 고유 ID를 추가하고 ID별로 해당 요소를 선택할 수 있습니다. ID 이름은 #로 시작합니다. 예를 들어 ID가 header인 요소를 추가합니다. rrreee🎜🎜🎜Descendant Selector 🎜Descendant 선택기는 특정 요소의 하위 요소를 선택하는 데 사용할 수 있습니다. 공백을 사용하여 두 개의 선택기를 함께 연결합니다. 예를 들어 #container 아래의 모든 p 요소를 선택하려면: 🎜rrreee🎜🎜🎜하위 요소 선택기 🎜하위 요소 선택기는 특정 요소의 직계 하위 항목을 선택할 수 있습니다. >를 사용하여 두 개의 선택기를 함께 연결합니다. 예를 들어, #navigation의 직계 하위인 모든 li 요소를 선택하려면: 🎜rrreee🎜🎜🎜의사 클래스 선택기 🎜의사 클래스 선택기를 사용하면 특정 클래스의 요소를 선택할 수 있습니다. 상태(예: 호버 상태, 액세스 상태 등) 의사 클래스 선택자는 :로 시작합니다. 예를 들어 마우스 오버 시 링크를 선택하려면 🎜rrreee🎜🎜🎜Adjacent Sibling Selector🎜Adjacent Sibling Selector는 다른 요소 바로 다음에 있는 요소를 선택합니다. +를 사용하여 두 개의 선택기를 함께 연결합니다. 예를 들어 h1 요소 바로 뒤에 있는 p 요소를 선택합니다. 🎜rrreee🎜🎜🎜속성 선택기 🎜속성 선택기는 속성 값에 따라 지정된 속성을 가진 요소를 선택할 수 있습니다. 보다 정확한 선택을 위해 속성 선택기는 대괄호 []를 사용하여 속성 이름과 속성 값을 지정합니다. 예를 들어, target=_blank로 모든 링크를 선택하려면: 🎜rrreee🎜🎜🎜위는 일반적으로 사용되는 CSS 선택기 중 일부이지만 이는 빙산의 일각에 불과합니다. 더 많은 선택기 구문을 익히면 HTML 요소를 더 잘 작동하고 유연하고 유지 관리 가능한 스타일 시트를 작성하는 데 도움이 됩니다. 🎜
