목록 항목의 대체 배경색

목록 항목의 대체 배경색

---

목록이 있고 각 항목이 연결되어 있습니다. 각 항목의 배경색을 바꿀 수있는 방법이 있습니까?

<ul>
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

---

멋진 CSS3는 어떻습니까?

li { background: green; }
li:nth-child(odd) { background: red; }

---

순전히 CSS에서이 작업을 수행하려면 각 대체 목록 항목에 할당 할 클래스가 있습니다. 예

<ul>
    <li class="alternate"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="alternate"><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li class="alternate"><a href="link">Link 5</a></li>
</ul>

목록이 동적으로 생성되면이 작업이 훨씬 쉬워집니다.

매번이 콘텐츠를 수동으로 업데이트하지 않으려면 jQuery 라이브러리를 사용 <li>하여 목록의 각 항목에 번갈아 스타일을 적용 할 수 있습니다 .

<ul id="myList">
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

그리고 당신의 jQuery 코드 :

$(document).ready(function(){
  $('#myList li:nth-child(odd)').addClass('alternate');
});

---

각 목록 항목에 대체 스타일 클래스를 추가하여이를 달성 할 수 있습니다.

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

그런 다음 스타일링

li { backgorund:white; }
li.odd { background:silver; }

자바 스크립트 (아래 jQuery 예제)를 사용하여이 프로세스를 추가로 자동화 할 수 있습니다.

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

---

'짝수'및 '홀수'와 같은 클래스 속성 쌍을 대체 목록 요소에 추가해보십시오.

<ul>
    <li class="even"><a href="link">Link 1</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li class="even"><a href="link">Link 3</a></li>
    <li class="odd"><a href="link">Link 4</a></li>
    <li class="even"><a href="link">Link 5</a></li>
</ul>

In a <style> section of the HTML page, or in a linked stylesheet, you would define those same classes, specifying your desired background colours:

li.even { background-color: red; }
li.odd { background-color: blue; }

You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing. Why type all those list elements by hand?

---

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes.

---

You can do it by specifying alternating class names on the rows. I prefer using row0 and row1, which means you can easily add them in, if the list is being built programmatically:

for ($i = 0; $i < 10; ++$i) {
    echo '<tr class="row' . ($i % 2) . '">...</tr>';
}

Another way would be to use javascript. jQuery is being used in this example:

$('table tr:odd').addClass('row1');

Edit: I don't know why I gave examples using table rows... replace tr with li and table with ul and it applies to your example

---

If you use the jQuery solution it will work on IE8:

jQuery

$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});

CSS

.alternate {
background: black;
}

If you use the CSS soloution it won't work on IE8:

li:nth-child(odd) {
    background: black;
}

---

This is set background color on even and odd li:

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }

---

You can by hardcoding the sequence, like so:

li, li + li + li, li + li + li + li + li {
  background-color: black;
}

li + li, li + li + li + li {
  background-color: white;
}

참고URL : https://stackoverflow.com/questions/358350/alternate-background-colors-for-list-items