>웹 프론트엔드 >CSS 튜토리얼 >CSS의 기본 선택자는 무엇입니까?

CSS의 기본 선택자는 무엇입니까?

下次还敢
下次还敢원래의
2024-04-25 13:12:17887검색

CSS의 기본 선택기는 다음을 포함하여 HTML 문서의 요소를 일치시키는 데 사용됩니다. 유형 선택기(클래스 이름 일치); ID 선택기(ID 일치); 하위 요소 inside), 하위 요소 선택자(직접 하위 요소와 일치), 인접 형제 선택자(바로 인접한 형제 요소와 일치), 범용 형제 선택자(모든 형제 요소와 일치), 속성 선택자(지정된 특성 요소와 일치)

CSS의 기본 선택자는 무엇입니까?

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를 가진 단일 요소와 일치합니다. 예를 들어 #headerheader ID의 요소입니다. 🎜🎜🎜🎜Descendant selector🎜🎜🎜🎜<code>ancestorDescendant: 조상 요소 내에 있는 하위 요소와 일치합니다. 예를 들어 ul liul 요소 내의 <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.