CSS 스타일 선택기란 무엇입니까?-프런트엔드 Q&A-php.cn

CSS 스타일 선택기는 특정 속성이나 관계를 기반으로 해당 요소를 선택하고 스타일을 지정하기 위해 CSS에서 사용되는 메커니즘을 나타냅니다. 웹 페이지를 작성하는 과정에서 선택기는 페이지 표시의 모양과 레이아웃을 제어하는 데 도움이 되는 필수 부분입니다. 이 문서에서는 몇 가지 일반적인 CSS 스타일 선택기를 소개합니다.

요소 선택기
요소 선택기는 가장 일반적인 선택기 중 하나입니다. 요소 이름을 기준으로 페이지의 요소를 선택합니다. 예를 들어,p선택기는 HTML의 모든
요소를 일치시키고 해당 스타일을 설정합니다.p选择器，它会匹配HTML中所有的
元素，并为它们设置相应的样式。

p { color: red; }

로그인 후 복사

类选择器(Class Selector)
类选择器以“.”为前缀，它是通过指定元素的CSS类来选择页面上的元素。例如，你可以在HTML中使用类属性（class）对元素进行分类，并为这些元素添加相同的样式。CSS中类选择器的语法为：.classname。

.warning { color: yellow; }

로그인 후 복사

ID选择器(ID Selector)
ID选择器以“#”为前缀，并且每个页面上的元素ID都是唯一的。使用ID选择器，你可以精确地选中指定的元素。CSS中ID选择器的语法为：#idname。

#header { background-color: black; color: white; }

로그인 후 복사

后代选择器(Descendant Selector)
后代选择器选择子元素中的元素。在CSS中，后代选择器的语法为：parent child。例如，下面例子中 h1 元素只会匹配posterID元素内部的 h1 标签：

#posterID h1 { color: blue; }

로그인 후 복사

相邻兄弟选择器(Adjacent Sibling Selector)
相邻兄弟选择器可以选中紧跟在某个元素后面的第一个兄弟元素。在CSS中，相邻兄弟选择器的语法为：A + B。例如，下面的CSS样式会选中紧跟在h2元素后面的第一个p元素。

h2 + p { color: #000000; }

로그인 후 복사

属性选择器(Attribute Selector)
属性选择器基于元素的属性值进行选择。例如，你可以选择所有具有指定属性值的元素。属性选择器的语法为：[attribute=value]。下面的例子使用了一个属性选择器，它选中了所有包含 href 属性，值以 “https://” 开头的元素：

a[href^="https://"] { color: green; }

로그인 후 복사

伪类选择器(Pseudo-Class Selector)
伪类选择器是一种CSS选择器，它可以根据元素的状态或位置而选择元素。常用的伪类选择器有:hover、:focus和:first-child等。它们的语法为：:pseudo-class

a:hover { background-color: yellow; }

로그인 후 복사

클래스 선택기

클래스 선택기에는 "." 접두사가 붙으며, 요소의 CSS 클래스를 지정하여 페이지의 요소를 선택합니다. 예를 들어 HTML의 class 속성을 사용하여 요소를 분류하고 이러한 요소에 동일한 스타일을 추가할 수 있습니다. CSS의 클래스 선택기 구문은.classname입니다.

rrreee

ID Selector(ID 선택기)ID 선택기에는 "#" 접두사가 붙으며, 각 페이지의 요소 ID는 고유합니다. ID 선택기를 사용하면 지정된 요소를 정확하게 선택할 수 있습니다. CSS의 ID 선택기 구문은#idname입니다. rrreee

Descendant Selector(하위 선택기)후손 선택기는 하위 요소의 요소를 선택합니다. CSS에서 하위 항목 선택기의 구문은 부모 자식입니다. 예를 들어 다음 예에서 h1 요소는 PosterID 요소 내의 h1 태그와만 일치합니다. rrreee