CSS3:first-child와first-of-type의 차이
2548 단어 CSS3 및 HTML5csscss3
<div id="example">
<p>1p>
<div>2div>
<div>3div>
div>
1、first-child
#example>div:first-child {
background-color: pink;
}
first-child는 작업 단계가 이렇기 때문에 어떤 요소도 선택하지 않았습니다.
① 모든 #example의 children을 일렬로 배열
② 첫 번째child 찾기
③ 첫 번째child가div이면 선택
첫 번째child가div가 아니기 때문에 검색에 실패하여 css 효과가 없습니다
2、first-of-type
#exzmple>div:first-of-type {
background-color: pink;
}
first-of-type에서 다음 이유로 컨텐츠가 2인div를 선택했습니다.
① 모든 #example의 children의div를 일렬로 배열
② 첫 번째child 찾기
이 예는 첫 번째div를 선택하고 백그라운드-color를 핑크 색으로 변경합니다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
