CSS div alternating color

내 웹 사이트에서 제 div를 스트립으로 만들려고 노력하고 있습니다. 그러나 간단히 들리지만, 내 div의 행 사이에 헤더를 추가하면 해당 div의 헤더를 계산하는 것처럼 보입니다. 심지어 스타일링/홀수CSS div alternating color

HTML

<div class="container"> 
    <h3>Title</h3> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <h3>Title</h3> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <h3>Title</h3> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
</div>

CSS

.container { 
    width:600px; 
    margin:0 auto; 
} 

.row { 
    line-height:24pt; 
    border: solid 1px black; 
} 

.row:nth-child(odd) { 
    background: #e0e0e0; 
} 

h3 { 
    line-height:36pt; 
    font-weight:bold; 
    color:blue; 
}

fiddle

나는 이미 바이올린에있는 코드가 기본적으로 헤더를 무시하고 스트라이핑을 수행 할 것이라고 생각했을 것입니다. 그러나 헤더로 간주됩니다.

출처

2013-02-21 Andrew Morris

는 nth-of-type

div.container > div:nth-of-type(odd) { 
    background: #e0e0e0; 
}

jsFiddle example

출처

2013-02-21 14:24:24 j08691

물론 고마워. –

이것은 제목을 통해 오른쪽으로 계산되는 것을 계속한다는 점에 유의하십시오. 카운터를 "재설정"(예 : 제목 뒤에 첫 번째 행이 항상 흰색이되도록)하려면 Jezen의 솔루션을 사용해야합니다. –

@ j08691 왜 nth-child가 아닌 nth-of-type을 사용하는 것이 가장 좋은지 알 수 있습니까? 그냥 궁금해서. – Musikero31

가장 쉬운 해결책은 물론 요소를 래핑하는 것입니다. 스트라이프 싶어요.

Your updated jsFiddle.

HTML

<div class="container"> 
    <h3>Title</h3> 
    <div class="zebra"> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
    </div> 
    <h3>Title</h3> 
    <div class="zebra"> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
    </div> 
    <h3>Title</h3> 
    <div class="zebra"> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
    </div> 
</div>

마음에 CSS

.row:nth-child(odd) {background: #e0e0e0;}

곰을 browser support 당신에게 중요한 경우 또한, 당신은 얼룩말 줄무늬 서버 측 대신에게 추가 클래스를 생성 할 수 있음 . nth-child를 사용하지 마십시오

출처

2013-02-21 14:23:06

이것은 그가 ... 더 추가하거나 쉽게 별도의 주석을 볼 수 있도록하는 코멘트 시스템이 사용하고자하는 경우 비효율적이다 그가 원하는 것은 동적이어야합니다 –

이것이 역동적 일 수는 없습니다. –

컨테이너의 래핑 요소가 해당 컨테이너 클래스에 CSS를 적용하는 것은 비효율적이며 n 번째 자식 메서드는 비효율적입니다. –

당신은 아마 형이 아닌 아이에 일치시킬 사용합니다.

사용 : n 번째의 형 같은

.row:nth-of-type(odd) { 
    background: #e0e0e0; 
}

출처

2013-02-21 14:25:29

답변

관련 문제