: 첫 자녀가 예상대로 작동하지 않음

96

라는 클래스를 사용 하여 첫 번째 h1내부 를 선택하려고합니다 . 이 안에있는 첫 번째 요소 이면 작동 하지만이 뒤에 오면 작동하지 않습니다.divdetail_containerh1divul

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

나는 내가 가진 CSS h1가 이것이 어디에 있든 첫 번째를 선택할 것이라는 인상을 받았다 div. 어떻게 작동시킬 수 있습니까?

css css-selectors

— 머핀 맨
소스

1

CSS가 할 수없는 것이 무엇이든 JavaScript는 할 수 있습니다.

— JCOC611 2010

11

이것은 CSS3로 할 수있는 일입니다. :)

— BoltClock

216

h1:first-child셀렉터 수단

요소 인
경우에만 부모의 첫 번째 자식을 선택합니다 h1.

여기 :first-child에있는 컨테이너의는이므로 ul만족할 수 없습니다 h1:first-child.

:first-of-type귀하의 경우에는 CSS3가 있습니다.

.detail_container h1:first-of-type
{
    color: blue;
}

그러나 브라우저 호환성 문제 및 기타 문제로 인해 첫 번째 h1클래스를 제공 한 다음 해당 클래스를 대상으로 지정하는 것이 좋습니다 .

.detail_container h1.first
{
    color: blue;
}

— BoltClock
소스

2

나는 그들이 표준을 만들 때 두 버전을 모두 구현해야한다고 생각하지만 지금은 이해합니다.

— The Muffin Man

IE9 릴리스에서 작동하지 않습니다. 개발자 도구에서 h1 : unknown으로 표시

— Cine

11

:first-of-type선택기의 호환성 목록 입니다 .

— Jess Telford 2012 년

4

의 최신 호환성 목록 입니다 :first-of-type. 이전 링크가 잘못되었습니다.

— BadHorsie

내 생각에이 용어 :first-child는 이해하기 어렵습니다. 항목을 CSS 선택 자로 정의한 h1다음 라고 말한 다음 선택한 DOM 수준에서 모든 항목의 "첫 번째 자식 가져 오기"를 생각하기 때문입니다. 나는 그것을 너무 많이 잘못 사용했다 ... 우리는 :first-of-type선택자에 익숙해지고 그 유형 의 첫 번째 자식 을 생각 해야한다 .

— Kai Noack

13

:first-child부모 요소의 첫 번째 자식 인 h1 경우에만 첫 번째를 선택합니다 . 당신의 예에서는 ul의 첫 번째 자식입니다 div.

의사 클래스의 이름은 다소 오해의 소지가 있지만 여기 사양에서 명확하게 설명 되어 있습니다.

jQuery의 :first선택기는 원하는 것을 제공합니다. 다음과 같이 할 수 있습니다.

$('.detail_container h1:first').css("color", "blue");

— Rob Sobers
소스

귀하의 권리는 오해의 소지가 있습니다. 이전에 jQuery를 사용했기 때문에 주로 혼란 스러웠습니다.

— The Muffin Man

9

특정 경우에는 다음을 사용할 수 있습니다.

.detail_container > ul + h1{ 
    color: blue; 
}

그러나 많은 경우에 동일한 선택기가 필요한 경우 BoltClock이 말한 것처럼 클래스가 있어야합니다.

— Grekz
소스

문제가 없어야합니다. 여기 ref w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

당신은 또한 사용할 수 있습니다

.detail_container h1:nth-of-type(1)

숫자 1을 다른 숫자로 변경하면 다른 h1 항목을 선택할 수 있습니다.

— Fabrice
소스

1

h1태그를 다른 태그로 래핑 div한 다음 첫 번째 태그 는 first-child. 즉, div심지어 스타일을 필요로하지 않는다. 그 아이들을 분리하는 방법 일뿐입니다.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

— 고스트 토스트
소스

0

요소는 <body>태그 에서 직접 상속 할 수 없습니다 . <dir style="padding-left:0px;"></dir>태그 에 넣을 수 있습니다 .

— 에드몬드 차우
소스