CSS를

2017-12-31 21 views
3

에 첫 아이를 선택 할 수 없음 여기에 내가 첫 번째 단락은 왼쪽 테두리를 갖고 싶어 내 코드 CSS를

div p:first-child{ 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>
입니다. 이 MDN 페이지에 따르면이 작업은 first-child을 사용하여 수행 할 수 있지만 내 이유로 어떤 이유로 작동하지 않습니다.

무엇이 문제입니까?

답변

5

:first-child 선택은 형식에 관계없이 부모의 첫 번째 자식을 선택합니다. <p>은 부모 <div>의 세 번째 자녀입니다. 당신이 div p:first-child을 말할 때, 첫 번째 p를 선택하지 않는, 어떻게 :first-child 작품을 명확히하기 위해

div p:first-of-type { 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

편집을 : 지정된 유형의 첫 번째 자식을 선택하려면, 대신 :first-of-type 사용 어떤 div의 자녀. div의 첫 번째 자녀를 여전히 선택하고 있지만 해당 자녀가 p 인 경우에만 해당됩니다. 따라서 추가 제한 사항입니다.

아래 예제에서는 :first-child에 시안 색 배경을 사용했습니다. 유형이 다르더라도 두 제목에 적용된 것을 볼 수 있습니다. 그런 다음 p:first-child에 빨간색 테두리를 사용했습니다. 이 p 때문에 당신은 그것을 만 가지고 이번에는 두 번째 타이틀에 적용되는 것을 볼 수 있습니다, 그것은 p하지 않기 때문에 그것이 첫 타이틀에 적용되지 않은 (즉, 그것은 h3입니다) :

div :first-child { 
 
    background-color: #0ff; 
 
} 
 

 
div p:first-child { 
 
    border: 1px solid #f00; 
 
}
<div> 
 
    <h3>This is my first Article</h3> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div> 
 
<div> 
 
    <p>This is my second Article</p> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

+0

아 :

div p:first-of-type { border-left: 5px solid #bdc3c7; } 

또는 :nth-child(3) 사용을 사용

. 내가 참조. 그래서'p : first-child'의'p'는 중복되어 있습니다. 그렇지 않습니까? –

+1

정확하지 않습니다. 'p : first-child' _only_는 'div'의 첫 번째 자식이'p' 요소 일 경우 서식을 적용합니다. 이것은 많은 상황에서 유용 할 수 있습니다. (너의 것만은 아님!) – Sam

+1

아니요, 중복되지는 않지만 생각하는대로 행동하지 않습니다. 만약 당신이 그것을 사용하지 않으면 스타일은 모든 div의 모든 첫 아이에게 적용될 것입니다. 이것을 사용하면 첫 번째 자식이'p' 일 경우에만 모든 div의 모든 자식에게 적용됩니다. 자세한 설명과 예는 내 편집 답변을 참조하십시오. –

1

당신이 가까이있어,하지만 <p>은 먼저 <div>의 하위하지 않는 경우 - <h3>이 때문에 <p>first-child에 의해 선택되지 않습니다.

nth-child를 사용해보십시오 :

div p:nth-child(3) { 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

3

:first-child는 부모의 첫 번째 자식있는 요소를 선택합니다. <p><div>의 세 번째 자녀이므로 작동하지 않습니다.

시도 대신 :first-of-type을 사용 :

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 
1

단락은 첫 번째 자녀가 아닙니다.같은 무엇인지,

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 

또는 :

함께 시도

div p:nth-of-type(1) { ... } 
1

당신은 div p:nth-child(3)를 사용할 수 있습니다 또는 당신은 작동 div p:first-of-type 중 하나의 방법을 사용할 수 있습니다.

:first-of-type CSS 의사 클래스는 형제 요소 그룹 중 해당 유형의 첫 번째 요소를 나타냅니다.

:nth-child() CSS 가상 클래스는 형제 그룹 간의 위치에 따라 하나 이상의 요소를 찾습니다.

:nth-child()here에 대한 문서입니다.

:first-of-typehere에 대한 문서입니다. :first-of-type 사용을 사용하기 위해

:

div p:nth-child(3) { 
    boder-left: 5px solid #bdc3c7; 
}