我可以为具有开始属性值的有序列表设置样式吗?

问题描述 投票:5回答:3

这是问题所在:

我有一个ol li有序列表,其中包含start属性,如下所示:

    .custom {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .custom li {
      counter-increment: step-counter;
      margin-bottom: 10px;
    }
    
    .custom li::before {
      content: counter(step-counter);
      margin-right: 5px;
      font-size: 80%;
      background-color: rgb(0,200,200);
      color: white;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
    }
    <ol start="6" class="custom">
      <li>This is the sixth item</li>
      <li>This is the seventh item</li>
      <li>This is the eighth item</li>
      <li>This is the ninth item</li>
      <li>This is the tenth item</li>
    </ol>

我在浏览器上获得以下输出:

List with 5 items; the first one has the number 1, but should have number 6

是否可以使用list-style属性中的值而不是start序列化有序列表中的1编号?但是,没有JavaScript可用于此。

html css html-lists semantic-markup
3个回答
5
投票

您可以使用您设置的CSS变量而不是start来模拟这个并使用它来重置计数器。出于语义目的,您还可以保留start属性。

.custom {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset: step-counter calc(var(--start) - 1);
}

.custom li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.custom li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0, 200, 200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}
<ol style="--start:6" start="6" class="custom">
  <li>This is the sixth item</li>
  <li>This is the seventh item</li>
  <li>This is the eighth item</li>
  <li>This is the ninth item</li>
  <li>This is the tenth item</li>
</ol>

2
投票

我已经为你的CSS添加了一些规则。最重要的是:

.custom{counter-reset:start 5;} 

这将使列表从5 + 1 = 6开始

.custom {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset:start 5;/*This*/
}

.custom li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  counter-increment: start;/*This*/
}

.custom li::before {
  content:counter(start);/*This*/
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}
<ol class="custom">
  <li>This is the sixth item</li>
  <li>This is the seventh item</li>
  <li>This is the eighth item</li>
  <li>This is the ninth item</li>
  <li>This is the tenth item</li>
</ol>

1
投票

li标签无权访问父属性。

这是我看到的最好的方式,使用content: attr()

    .custom {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .custom li {
      counter-increment: step-counter;
      margin-bottom: 10px;
    }
    
    .custom li::before {
      content: attr(data-idx);
      margin-right: 5px;
      font-size: 80%;
      background-color: rgb(0,200,200);
      color: white;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
    }
    <ol class="custom">
      <li data-idx="6">This is the sixth item</li>
      <li data-idx="7">This is the seventh item</li>
      <li data-idx="8">This is the eighth item</li>
      <li data-idx="9">This is the ninth item</li>
      <li data-idx="10">This is the tenth item</li>
    </ol>
© www.soinside.com 2019 - 2024. All rights reserved.