主页 / 问题 / 742292
Accepted
D.Ryksd
Asked:2020-11-09 17:25:57 +0000 UTC2020-11-09 17:25:57 +0000 UTC

是否可以结合之前和第n个孩子？

  • 772

有一个项目符号列表。我的任务是将标记“星号”分配给列表的奇数行。我做了 list-style: none; （制作隐形标记）。然后我尝试结合 nth-child(2n+1) 和之前，并通过 content="asterisk" 分配一个奇数（或偶数，已经没有区别）标记 - “星号”。问题是我如何结合 nth-child(2n+1) 和之前的。我无法更改 html 中的任何内容。只能通过 css。

html

2 个回答

  1. Best Answer

    * {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
}

ul {
  margin: 50px;
}

li:nth-child(even):before {
  content: '*';
  color: red;
}

li:nth-child(odd):before {
  content: '1';
  color: green;
}
    <ul>
  <li>первый</li>
  <li>второй</li>
  <li>третий</li>
  <li>четвертый</li>
</ul>

    • 2 

  2. ul {
  padding: 0;
}

li {
  list-style: none;
  padding-left: 20px;
  position: relative;
}

li:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  background: #00f;
  margin-top: -4px;
}

li:nth-of-type(odd):before {
  background: #f00;
}
    <ul>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>

    • 2

相关问题