목록 항목의 대체 배경색

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

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

HTML 페이지의 <style> 섹션 또는 링크 된 스타일 시트에서 원하는 배경색을 지정하여 동일한 클래스를 정의합니다.

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

더 큰 유연성을 제공하고 타이핑을 줄이기 위해 요구 사항이 발전함에 따라 템플릿 라이브러리를 사용할 수 있습니다. 모든 목록 요소를 직접 입력하는 이유는 무엇입니까?

표준 HTML을 사용하기 때문에 별도의 클래스를 정의하고 행을 클래스에 수동으로 설정해야합니다.

행에 대체 클래스 이름을 지정하여이를 수행 할 수 있습니다. 나는 row0및 사용하는 것을 선호 row1하는데, 이는 목록이 프로그래밍 방식으로 작성되는 경우 쉽게 추가 할 수 있음을 의미합니다.

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

또 다른 방법은 javascript를 사용하는 것입니다. 이 예제에서는 jQuery가 사용됩니다.

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

편집 : 나는 테이블 행을 사용하여 예를 준 이유는 ... 알고 대체하지 않습니다 tr와 li와 table와 ul와 당신의 예에 적용

jQuery 솔루션을 사용하면 IE8에서 작동 합니다.

jQuery

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

CSS

.alternate {
background: black;
}

CSS 솔루션을 사용하면 IE8에서 작동하지 않습니다 .

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

이것은 짝수 및 홀수 li에 배경색으로 설정됩니다.

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

다음과 같이 시퀀스를 하드 코딩 할 수 있습니다.

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

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