다음과 같은 것이 있습니다.
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>해당 div 내에서 날짜의 글꼴 색상을 설정할 수 있도록 두 번째 div ( "content"div 내의 첫 번째 div)에 대한 CSS 선택기는 무엇입니까?
답변:
귀하의 질문에 대한 가장 정확한 답변은 ...
#content > div:first-of-type { /* css */ }이렇게하면 #content의 직계 자식 인 첫 번째 div에 CSS가 적용됩니다 (#content의 첫 번째 자식 요소 일 수도 있고 아닐 수도 있음).
다른 옵션 :
#content > div:nth-of-type(1) { /* css */ }except처음 / 마지막 div 를 선택하는 방법을 알려주시겠습니까 ?
#content > div:not(:last-of-type) { /* css */ }
#content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
원하는
#content div:first-child {
/*css*/
}<div>(는) 첫 번째 자녀가 아니기 때문에 작동 하지 않습니다 <h1>.
div가 첫 번째 자녀 인 경우에도 IE에서는 전혀 작동하지 않습니다 .
H1이 항상 거기에 있다고 가정 할 수 있다면
div h1+div {...}그러나 콘텐츠 div의 ID를 지정하는 것을 두려워하지 마십시오.
#content h1+div {...}이는 jQuery와 같은 JavaScript 라이브러리에 의존하지 않고 지금 당장 크로스 브라우저를 얻을 수있는 것만 큼 좋습니다. h1 + div를 사용하면 H1 이후의 첫 번째 div 만 스타일을 얻습니다. 대안이 있지만 CSS3 선택기에 의존하므로 대부분의 IE 설치에서 작동하지 않습니다.
당신이 찾고있는 것에 가장 가까운 것은 : first-child pseudoclass입니다 ; 당신은이 때문에 불행하게도이 귀하의 경우에는 작동하지 않습니다 <h1>전과 <div>s. 내가 제안하고 싶은 것은 <div>, like에 클래스를 추가 한 <div class="first">다음 그런 방식으로 스타일을 지정하거나 실제로 클래스를 추가 할 수없는 경우 jQuery를 사용하는 것입니다.
$('#content > div:first')
$('#content > div.first)