:첫 번째 아이와 :첫 번째 유형의 차이점은 무엇입니까?
나는 그것을 구별할 수 없습니다.element:first-child그리고.element:first-of-type
예를 들어, 당신이 디브를 가지고 있었다고 칩시다.
div:first-child
두<div>부모의 첫 번째 자식인 요소들.
div:first-of-type
두<div> 번째 <div>그들 부모의 요소.
이것은 완전히 똑같은 것처럼 보이지만, 그들은 다르게 작동합니다.
누가 설명 좀 해주시겠어요?
상위 요소에는 하나 이상의 하위 요소가 있을 수 있습니다.
<div class="parent">
<div>Child</div>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
이 아이들 중에서 오직 한 명만이 첫 번째 아이가 될 수 있습니다.은 이다음일다니치합과는▁by다▁matched와 일치합니다.:first-child:
<div class="parent">
<div>Child</div> <!-- :first-child -->
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
의 :first-child그리고.:first-of-type은 것은입니다.:first-of-type요소 유형의 첫 번째 요소와 일치합니다. HTML에서는 해당 요소가 부모의 첫 번째 자식 요소가 아닌 경우에도 태그 이름으로 표시됩니다.지금까지 우리가 본 아이들의 요소는 모두div 저는 있다가 입니다, 하만참고요세하다, 후말드리겠습니씀에잠시지다.
현재로서는 그 반대도 마찬가지입니다.:first-child 한또입니다.:first-of-type 번째 첫 아이이기 때문에 첫 번째 아이이기도 .div유사 선택기와 유형 선택기가 모두 일치합니다.div:
<div class="parent">
<div>Child</div> <!-- div:first-child, div:first-of-type -->
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
첫 을 제이첫번아유변형면에서 ,div, 들면예를들과 같은 다른 것에.h1첫 번째가 될 이지만, 더 첫 번째 아이가 입니다.div분명히; 대신, 그것은 첫 번째 (그리고 유일한)가 됩니다.h1 외에 다것이있다면이 있다면,div동일한 부모 내에서 이 첫 번째 자식, 그 중 첫 번째 자식을 따르는 요소.div 요소들이 그면요일니다합치가와 합니다.div:first-of-type예에서 두 번째 는 첫 아이가 .div가 째첫아여바후뀐에자로가이▁▁the▁to에로 바뀐 후에h1:
<div class="parent">
<h1>Child</h1> <!-- h1:first-child, h1:first-of-type -->
<div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
::first-child는 와동합다니등다에 합니다.:nth-child(1).
은 또한 요소든 하나의 할 수 합니다.:first-child한 번에, 그것은 일치하는 많은 아이들을 가질 수 있고 가질 것입니다.:first-of-type자녀 유형의 수에 따른 유사 클래스. " 예서선택는기에이는"를 합니다..parent > :first-of-type((암묵的)으로*:first-of-type유사)는 하나가 아니라 두 개의 요소와 일치합니다.
<div class="parent">
<h1>Child</h1> <!-- .parent > :first-of-type -->
<div>Child</div> <!-- .parent > :first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
에 대해서도 마찬가지입니다.:last-child그리고.:last-of-type아무개의:last-child또한 필요에 의해서도.:last-of-type부모 내에서 그것을 따르는 다른 요소가 절대적으로 없기 때문입니다. 만면마지, 왜하막은냐 에.div또한 마지막 아이입니다.h1마지막 유형임에도 불구하고 마지막 자식이 될 수 없습니다.
:nth-child()그리고.:nth-of-type()임의의 정수 인수와 함께 사용될 때 원칙적으로 매우 유사한 기능.:nth-child(1)위에서 언급한 예), 그러나 그들이 다른 경우는 일치하는 잠재적인 요소의 수에 있습니다.:nth-of-type()이에 대한 자세한 내용은 p:nth-child(2)와 p:nth-of-type(2)의 차이점은 무엇입니까?
사이의 차이를 보여주는 예시를 만들었습니다.first-child그리고.first-of-type여기서.
.parent :first-child {
color: red;
}
.parent :first-of-type {
background: yellow;
}
.parent p:first-child {
text-decoration: line-through;
}
// Does not work
.parent div:first-child {
font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
border: 1px black solid;
}<div class="parent">
<p>Child</p>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div> 첫 번째 아이 유형과 첫 번째 아이 유형의 차이는 예를 들어 이해할 수 있습니다.당신은 나에 의해 만들어진 다음 예시를 이해해야 하며 당신은 정말로 당신의 편집기에 코드를 붙여넣을 수 있습니다. 당신은 그것들이 무엇이고 어떻게 작동하는지 이해할 수 있을 것입니다.
첫 번째 유형에 대한 코드 #1:
<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>
결과
.p1,.p2,.p3는 스타일이 될 것이고 그들의 색깔은 빨간색이 될 것입니다. 우리가 두 번째 디바 뒤에 .p1을 넣어도 빨간색이 될 것입니다.
첫째 아이를 위한 코드 #2:
<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>
결과:
두 번째 div 2 뒤에 .p2를 놓으면 빨간색이 되지 않지만 첫 번째 경우에는 작동했습니다.
그:first-child유사 클래스는 상위 요소의 첫 번째 자식인 경우 형제 요소 그룹 중 첫 번째 요소를 선택합니다.반면에,:first-of-type부모의 첫 번째 자식인지 여부에 관계없이 형제 요소 그룹 중에서 지정된 유형의 첫 번째 요소를 선택합니다.
언급URL : https://stackoverflow.com/questions/24657555/what-is-the-difference-between-first-child-and-first-of-type
'programing' 카테고리의 다른 글
| Google 지도 확대/축소 제어가 엉망입니다. (0) | 2023.08.19 |
|---|---|
| memcpy 또는 memmove가 dest와 다른 포인터를 반환할 수 있습니까? (0) | 2023.08.19 |
| 파라미터 변경 시 Angular 2 재로드 경로 (0) | 2023.08.19 |
| 봄에 멀티파트와 @RequestBody를 함께 사용할 수 있습니까? (0) | 2023.08.19 |
| 함수에 매개 변수가 있는지 확인합니다. (0) | 2023.08.19 |