个人中心
gpt4 book ai didi

css - 用一些背景颜色突出显示每一行第二行

转载 作者：行者123 更新时间：2023-11-28 00:14:36 25 4
gpt4 key购买 nike

我想尝试更改每第二个 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>

最佳答案

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

你可以为此使用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>

关于css - 用一些背景颜色突出显示每一行第二行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55189715/

25 4 0
文章推荐： javascript - 在动态加载div内容之前添加图片jquery
文章推荐： javascript - 如何在 Outlook 加载项的 Javascript API 中监视电子邮件的“收件人/抄送”字段的更改？
文章推荐： javascript - 无法使用 javascript 对 JSON 对象 POST 中的双引号进行转义
文章推荐： c++ - 使用 C++11 进行转换和累加
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com