Question

我想有一个替代的行颜色，但是颜色并没有覆盖整个角色。

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

Answer 1

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

列表的替代颜色

1 个答案: