CSS div 교체 색상

CSS div 교체 색상

---

내 웹 사이트에서 내 div를 얼룩말로 스트라이프하려고하는데, 간단하게 들리지만 div의 행 사이에 헤더를 추가하면 홀수 / 짝수 스타일의 헤더를 계산하는 것처럼 보입니다.

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

깡깡이

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

---

사용하지 마십시오 n 번째의 아이를 , 사용 n 번째의 형

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

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

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

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

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

<div class="container">
  <h3>Title</h3>
  <div class="row">Content</div>
  <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>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <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>

---

당신은 아마도 아이가 아닌 유형에 일치하고 싶을 것입니다.

다음 과 같은 nth-of-type 사용

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

---

가장 쉬운 해결책은 당연히 스트라이프를 원하는 요소를 감싸는 것입니다.

업데이트 된 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;}

Bear in mind also that if browser support is important to you, you might want to generate additional classes for zebra-striping server side instead.

참고URL : https://stackoverflow.com/questions/15004537/css-div-alternating-colour