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

Program / 글쓴이

라는 클래스를 사용 하여 첫 번째 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. 어떻게 작동시킬 수 있습니까?

답변

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;
}

답변

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

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

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

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

답변

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

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

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

답변

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

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

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

답변

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

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

답변

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

답변