직장에서 우리는 CSS에서 선택자를 자주 사용합니다. ID 선택자, 클래스 선택자, 태그 선택자, 의사 클래스 선택자 등 다양한 유형이 있으므로 오늘은 n번째 항목에 중점을 둘 것입니다. 의사 클래스 선택기의 child는 nth-child를 사용하는 방법과 그것과 nth-of-type의 차이점을 의미하며 둘 다 CSS3의 의사 클래스 선택기이며 실제로 많은 사람들이 비슷한 의미를 가지고 있다고 생각합니다. , 그들은 여전히 다릅니다. 다음으로 CSS3 nth-of-type과 nth-child의 사용법과 차이점에 대해 이야기하겠습니다.
1 nth-child( ) 및 nth-of-type( )의 정의 및 사용법
nth-child(n) : 상위 요소의 n번째 하위 요소와 일치합니다. 요소 유형에는 제한이 없습니다.
nth-of-type(n): 동일한 유형의 n번째 형제 요소와 일치합니다.
n은 숫자, 키워드 또는 수식일 수 있습니다. 예: nth-child(odd) 홀수,nth-child(even) 짝수.
n번째 자식과 n번째 유형의 차이점은 요소를 찾는 방법입니다. 전자는 형제 요소 중에서 절대 위치에 있는 요소를 찾는 것이고, 후자는 같은 유형의 요소 중에서 절대 위치에 있는 요소를 찾는 것입니다. 동일한 점은 둘 다 요소를 찾은 다음 이전 선택기와 일치시키는 것입니다. 여기서 일치하는 방법은 동일합니다.
약간 아래쪽으로 확장하여 검색 방법을 명확히 합니다. 이전 선택자가 어떻게 변경되더라도 결국 요소를 먼저 찾은 다음 이전 선택자와 일치합니다. 이는 선택자가 검색 방법과 아무 관련이 없음을 의미합니다. 다른 조합으로 인해 혼동되지 않도록 이를 명확하게 하십시오.
이 정의를 보면 차이점이 그다지 명확하지 않을 수 있습니다. 다음으로 코드와 그림을 통해 조금씩 구별하겠습니다.
2. n번째 유형과 n번째 하위의 차이점에 대한 예를 제시하세요.
1. Tags , 두 번째 div에 5개의 H5 태그를 제공하고 각각 nth-child(2) 및 nth-of-type(2)을 사용하고 결과가 동일한지 확인하면 모두 색상이 변경됩니다.
<style type="text/css">
p:nth-child(2){color: red ;}
h5:nth-of-type(2){color: blue;}
</style>
<body>
<div>
<p>星期一</p>
<p>星期二</p>
<p>星期三</p>
<p>星期四</p>
<p>星期五</p>
</div>
<div>
<h5 id="段落一">段落一</h5>
<h5 id="段落二">段落二</h5>
<h5 id="段落三">段落三</h5>
<h5 id="段落四">段落四</h5>
<h5 id="段落五">段落五</h5>
</div>
</body>Rendering:
2 이제 HTML 코드를 일부 변경해 보겠습니다. , 조금 다르게 나타나도록 하면 CSS 스타일은 변경되지 않습니다. 첫 번째 p 요소와 첫 번째 h5 요소를 h4로 변경합니다. 코드는 다음과 같습니다:
<div> <h4 id="星期一">星期一</h4> <p>星期二</p> <p>星期三</p> <p>星期四</p> <p>星期五</p> </div> <div> <h4 id="段落一">段落一</h4> <h5 id="段落二">段落二</h5> <h5 id="段落三">段落三</h5> <h5 id="段落四">段落四</h5> <h5 id="段落五">段落五</h5> </div>
Rendering:
<div> <p>星期一</p> <h4 id="星期二">星期二</h4> <p>星期三</p> <p>星期四</p> <p>星期五</p> </div> <div> <h5 id="段落一">段落一</h5> <h4 id="段落二">段落二</h4> <h5 id="段落三">段落三</h5> <h5 id="段落四">段落四</h5> <h5 id="段落五">段落五</h5> </div>Rendering:
이게 왜죠?
nth-child는 여러 형제 요소 중에서 두 번째 요소를 찾는 것입니다. 해당 요소가 무엇이든 상관없이 순위가 2위인 경우에 한합니다. 여기서 전자 div는화요일
을 찾고, 후자 div는
문단 2
를 찾습니다. 찾은 후 이전 선택자와 일치하면 스타일이 적용됩니다. 이전 선택자는 p이며 요소가 p 유형이어야 하지만 여기서는 모두 h4이므로 일치하지 않으며 이 스타일은 두 요소 모두에 적용되지 않습니다.nth-of-type은 동일한 HTML 태그 유형을 가진 여러 형제 요소 중에서 발견된 두 번째 요소입니다. 첫 번째 div에서
Wednesday
는 두 번째 div에서 p 유형의 두 번째 요소이고,Paragraph 3
은 h5 유형의 두 번째 요소입니다. . 요소. 찾은 후 이전 선택자와 일치하면 스타일이 적용됩니다. 이전 선택기가 h5이면 후자 div의3번째 단락
요소에만 스타일이 적용되지만 이전 div의화요일
에는 스타일이 지정되지 않습니다. 요약: 위에서 n번째 유형과 n번째 자식의 차이점을 자세히 소개했는데, 도움이 되셨으면 좋겠습니다!위 내용은 CSS3 의사 클래스 선택기 nth-of-type 및 nth-child의 사용법과 차이점을 분석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
너무 많은 색상 링크Apr 13, 2025 am 11:36 AM최근에 색상에 대한 도구, 기사 및 리소스가 많이있었습니다. 당신의 즐거움을 위해 여기에 반올림하여 몇 개의 탭을 닫을 수 있습니다.
Flexbox에서 자동 마진이 작동하는 방법Apr 13, 2025 am 11:35 AMRobin은 이전에 이것을 다루었지만 지난 몇 주 동안 그것에 대해 약간의 혼란을 듣고 다른 사람이 설명하는 데 찌르는 것을 보았습니다.
움직이는 무지개가 강조합니다Apr 13, 2025 am 11:27 AM나는 샌드위치 사이트의 디자인을 절대적으로 좋아합니다. 많은 아름다운 특징 중에는 무지개가있는이 헤드 라인이 스크롤 할 때 움직이는 밑줄이 있습니다. 그것은 아닙니다
새해, 새 직업? 그리드 구동 이력서를 만들자!Apr 13, 2025 am 11:26 AM많은 인기있는 이력서 디자인은 그리드 모양으로 섹션을 배치하여 사용 가능한 페이지 공간을 최대한 활용하고 있습니다. CSS 그리드를 사용하여 레이아웃을 만듭니다
너무 많이 재 장전하는 습관에서 사용자를 해소하는 한 가지 방법Apr 13, 2025 am 11:25 AM페이지 새로 고침은 일입니다. 때로는 반응이 없다고 생각하거나 새로운 콘텐츠를 사용할 수 있다고 생각할 때 페이지를 새로 고침합니다. 때때로 우리는 단지 화가났습니다
React를 사용한 도메인 구동 설계Apr 13, 2025 am 11:22 AMReact 세계에서 프론트 엔드 애플리케이션을 구성하는 방법에 대한 지침은 거의 없습니다. (“옳은 느낌”이 될 때까지 파일을 움직여도 롤). 진실
비활성 사용자 감지Apr 13, 2025 am 11:08 AM대부분의 경우 사용자가 응용 프로그램에 적극적으로 참여하거나 일시적으로 비활성화되어 있는지에 대해 신경 쓰지 않습니다. 비활성, 의미, 아마도 그들
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo는 항상 통합으로 훌륭했습니다. 캠페인 모니터, MailChimp 및 Typekit과 같은 특정 앱과 통합이 있지만
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
드림위버 CS6
시각적 웹 개발 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
