时间戳

首页 > 解决方案 > 用一些背景颜色突出显示每隔 li 行

css - 用一些背景颜色突出显示每隔 li 行

问题描述

我想尝试更改每隔 li 行的背景颜色，例如具有标题的 ul 的背景颜色。第一行应该有默认颜色，然后第二行应该有自定义颜色，依此类推。

我尝试将 nth-of-child(even) 设置为 li 但它没有按预期工作，因为它计算的是单个 li 元素而不是整行

http://jsfiddle.net/roznfxjL/ 

.widthh {
  width: 100%;
}

.cont {
  background: #f2f2f2;
}

.email {
  display: inline-block;
  list-style: none;
  word-wrap: break-word;
  width: 35%;
  margin-right: 10px;
  vertical-align: top;
  margin-bottom: 20px
}

.subject {
  display: inline-block;
  list-style: none;
  width: 15%;
  vertical-align: top;
  word-wrap: break-word;
  margin-right: 15px;
}

.from {
  display: inline-block;
  list-style: none;
  width: 10%;
  vertical-align: top;
  word-wrap: break-word;
  margin-right: 10px;
}

.action {
  display: inline-block;
  list-style: none;
  width: 10%;
  vertical-align: top;
}
<ul class="widthh cont">
  <li class="email">
    Email
  <li class="subject">
    Subject
  <li class="from">
    From
  </li>
  <li class="action">
    Action
  </li>
</ul>

<ul class="widthh">
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
</ul>

标签： css

解决方案

重复模式。
您的模式可以这样描述：
四个没有背景的元素，然后是四个有背景的元素，依此类推。
这意味着它每八个元素重复一次。

你可以使用nth-child()它

.widthh + .widthh li:nth-child(8n+5), /* 5, 13, 21 */
.widthh + .widthh li:nth-child(8n+6), /* 6, 14, 22 */
.widthh + .widthh li:nth-child(8n+7), /* 7, 15, 23 */
.widthh + .widthh li:nth-child(8n+8) /* 8, 16, 24 */ { 
  background: red;
}

以你的例子：

.widthh + .widthh li:nth-child(8n+5), /* 5, 13, 21 */
.widthh + .widthh li:nth-child(8n+6), /* 6, 14, 22 */
.widthh + .widthh li:nth-child(8n+7), /* 7, 15, 23 */
.widthh + .widthh li:nth-child(8n+8) /* 8, 16, 24 */ {
  background: red;
}
<!DOCTYPE html>
<!-- By cupusasa -->
<html>
<head>
	<title></title>
	<style>
	      .widthh{
	      	width: 100%;
	      }
        .cont{
          background: #f2f2f2;
        }
		.email {
			display: inline-block;
			list-style: none;
			word-wrap: break-word;
			width: 35%;
			margin-right: 10px;
			vertical-align: top;
		}
		.subject {
			display: inline-block;
			list-style: none;
			width: 15%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 15px;
		}
		.from {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 10px;
		}
		.action {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
		}
	</style>
</head>
<body>

<ul class="widthh cont">
<li class="email">
Email
<li class="subject">
Subject
<li class="from">
From
</li>
<li class="action">
Action
</li>
</ul>

<ul class="widthh">
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li><li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
</ul>

</body>
</html>

编辑：

如果你想让它看起来更像行（li 的高度相同），你可以使用一些 flex。

但是，您需要调整列的宽度以匹配您的第一个列表。

.widthh + .widthh li:nth-child(8n+5), /* 5, 13, 21 */
.widthh + .widthh li:nth-child(8n+6), /* 6, 14, 22 */
.widthh + .widthh li:nth-child(8n+7), /* 7, 15, 23 */
.widthh + .widthh li:nth-child(8n+8) /* 8, 16, 24 */ {
  background: red;
}

.widthh + .widthh { 
  display: flex;
  flex-wrap: wrap;
}
.widthh + .widthh li {
  margin: 0;
}
<!DOCTYPE html>
<!-- By cupusasa -->
<html>
<head>
	<title></title>
	<style>
	      .widthh{
	      	width: 100%;
	      }
        .cont{
          background: #f2f2f2;
        }
		.email {
			display: inline-block;
			list-style: none;
			word-wrap: break-word;
			width: 35%;
			margin-right: 10px;
			vertical-align: top;
		}
		.subject {
			display: inline-block;
			list-style: none;
			width: 15%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 15px;
		}
		.from {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 10px;
		}
		.action {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
		}
	</style>
</head>
<body>

<ul class="widthh cont">
<li class="email">
Email
<li class="subject">
Subject
<li class="from">
From
</li>
<li class="action">
Action
</li>
</ul>

<ul class="widthh">
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li><li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
</ul>

</body>
</html>

推荐阅读