CSS의 기본 선택기는 다음을 포함하여 HTML 문서의 요소를 일치시키는 데 사용됩니다. 유형 선택기(클래스 이름 일치); ID 선택기(ID 일치); 하위 요소 inside), 하위 요소 선택자(직접 하위 요소와 일치), 인접 형제 선택자(바로 인접한 형제 요소와 일치), 범용 형제 선택자(모든 형제 요소와 일치), 속성 선택자(지정된 특성 요소와 일치)
CSS의 기본 선택기
CSS의 기본 선택기는 HTML 문서의 요소를 일치시키는 데 사용됩니다. 이러한 선택기를 사용하면 특정 요소에 대한 스타일을 지정할 수 있습니다.
유형 선택기
요소
: 지정된 요소 이름을 가진 모든 요소와 일치합니다. 예를 들어 p
는 모든 단락을 의미합니다. element
:匹配带有指定元素名的所有元素,例如 p
表示所有段落。类选择器
.class-name
:匹配具有指定类名的所有元素,例如 .example
表示所有带有 example
类的元素。ID 选择器
#id-name
:匹配具有指定 ID 的单个元素,例如 #header
表示带有 header
ID 的元素。后代选择器
ancestor descendant
:匹配位于祖先元素内的后代元素,例如 ul li
表示所有位于 ul
元素内的 li
元素。子元素选择器
parent > child
:匹配作为父元素直接子元素的子元素,例如 div > p
表示所有直接位于 div
元素内的 p
元素。相邻兄弟选择器
element + adjacent
:匹配直接出现在指定元素之后的相邻元素,例如 p + h2
表示所有直接位于 p
元素之后的 h2
元素。通用兄弟选择器
element ~ sibling
:匹配所有出现在指定元素之后的兄弟元素,包括相邻元素和更远的元素,例如 h1 ~ p
表示所有位于 h1
元素之后的 p
元素。属性选择器
[attribute]
:匹配具有指定属性的元素,例如 [href]
表示所有具有 href
属性的元素。[attribute=value]
:匹配具有指定属性并具有指定值的元素,例如 [href="example.com"]
表示所有 href
.class-name
: 지정된 클래스 이름을 가진 모든 요소와 일치합니다. 예를 들어 .example
은 가 있는 모든 요소를 의미합니다. 예제
클래스의 요소. 🎜🎜🎜🎜ID 선택기🎜🎜🎜🎜#id-name
: 지정된 ID를 가진 단일 요소와 일치합니다. 예를 들어 #header
는 header ID의 요소입니다. 🎜🎜🎜🎜Descendant selector🎜🎜🎜🎜<code>ancestorDescendant
: 조상 요소 내에 있는 하위 요소와 일치합니다. 예를 들어 ul li
는 ul 요소 내의 <code>li
요소입니다. 🎜🎜🎜🎜Child element selector🎜🎜🎜🎜parent > child
: 상위 요소의 직계 하위인 하위 요소와 일치합니다. 예를 들어 div > p
는 모두 div
요소 내에 있는 직접 A p
요소입니다. 🎜🎜🎜🎜인접 형제 선택기🎜🎜🎜🎜요소 + 인접
: p + h2
와 같이 지정된 요소 바로 뒤에 나타나는 인접 요소와 일치합니다. 이는 모두 직접 p 요소 뒤에 오는 code>h2 요소입니다. 🎜🎜🎜🎜범용 형제 선택기🎜🎜🎜🎜요소 ~ 형제
: h1 ~ p
와 같은 인접 요소 및 추가 요소를 포함하여 지정된 요소 뒤에 나타나는 모든 형제 요소와 일치합니다. code>는 h1
요소 뒤에 오는 모든 p
요소를 나타냅니다. 🎜🎜🎜🎜속성 선택기🎜🎜🎜🎜[속성]
: [href]
와 같이 지정된 속성이 있는 요소와 일치합니다. 이는 href
가 있는 모든 요소를 의미합니다. > 요소의 속성입니다. 🎜🎜[attribute=value]
: 지정된 속성과 지정된 값을 가진 요소를 일치시킵니다. 예를 들어 [href="example.com"]
는 모든 를 의미합니다. href 속성 값이 "example.com"인 요소입니다. 🎜🎜
위 내용은 CSS의 기본 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!