列表的替代顏色

-1

我想要有一個交替的行顏色，但是顏色不能覆蓋整個角色。列表的替代顏色

HTML：

<div id="map-info" class="dropSheet"> 
    <ul class="info-lists"> 
     <li class="info-list"> 
      <address> 
       <strong>Twitter Inc</strong><br> 
       795 Folsom Ave, Suite 600<br> 
       San Francisco, CA 94107<br> 
       <abbr title="Phone">P:</abbr> (123) 456-7890 
      </address> 
     </li> 
    </ul> 
    </div>

CSS：

#map-info 
{ 
    position: absolute; 
    top: 50px; 
    width: 30%; 
    height: 100%; 
    overflow: auto; 
    padding:20px 20px; 
} 

.dropSheet 
{ 
    background-color/**/: #FFFFFF; 
    background-image/**/: none; 
} 

.info-list 
{ 
    list-style-type: none; 
} 

.info-list:nth-child(odd) { background: red; }

來源

2014-03-25 Alvin

你能提供一個小提琴嗎？ –

http://jsfiddle.net/uN2SW/你的問題是什麼顏色僅適用於整體。 –

'不適用於所有郵政地址和電子郵件地址;它應該被保留用於提供有關該文檔的聯繫人的信息：http://html5doctor.com/the-address-element/ – fcalderan

案例1：

備用行顏色<p>元素

p:nth-child(odd) 
{ 
    color:#ff0000; 
} 
p:nth-child(even) 
{ 
    color:#0000ff; 
}

See demo

案例2

備用行顏色<li>元素

HTML

<ul> 
    <li>details 1</li> 
    <li>details 2</li> 
    <li>details 3</li> 
    <li>details 4</li> 
    <li>details 5</li> 
</ul>

CSS

li { color: green; } 

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

See demo

來源

2014-03-25 10:28:21 newTag

列表的替代顏色

回答

相關問題