CSS를

Question

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

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을 사용하여 수행 할 수 있지만 내 이유로 어떤 이유로 작동하지 않습니다.

무엇이 문제입니까?

Answer 1

: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>

Answer 2

당신이 가까이있어,하지만 <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>

Answer 3

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

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

는

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

Answer 4

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

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

또는 :

함께 시도

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

Answer 5

당신은 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; 
}