css - 如何更改计数器增量的默认值？

Question

我认为代码将“Rank”标题计为一行并为其分配1。如何更改的第一个数字counter-increment？我希望表格从 0 开始，以便将“Rank”标题分配为 0，下一行为 1，依此类推。

http://oi59.tinypic.com/5bsabc.jpg

CSS 文件

tr.odd {background-color: #FFFFFF}
tr.even {background-color: #F2F2F2}

table {
    counter-reset: rowNumber;
}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    text-align: center;
}

JSP 文件

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/egovframework/leaderboard.css'/>" />
<form id="listForm" name="listForm" method="post">
    <input type="hidden" name="id"/>
</form>
<h1 style="text-align:center;font-size:56px; font-family: Mistral;margin-top:-45px;">Leaderboard</h1>   
<body style="font-family:Arial;font-size:14px;text-align:center;color:#000000;">
    <div id="table">
    <table bordercolor="#FFFFFF" cellpadding="12px" cellspacing="2px" align="center" style="margin-top:-21px;">
        <colgroup>
        <col style="width:50px">
        <col style="width:500px">
        <col style="width:150px">
        <col style="width:100px">
        </colgroup>
        <tr>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:50px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Rank</th>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:100px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Name</th>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:150px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Points</th>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:100px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Wins</th>
        </tr>
        <c:forEach var="item" items="${leaderboard}" varStatus="loopStatus">
            <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                </td>
                <td align="left" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000; cursor:pointer;" onclick="javascript:selectPlayer('${item.id}');">
                <c:out value="${item.playersLastName}"/>&#44;&nbsp;<c:out value="${item.playersFirstName}"/>
                &nbsp;</td>
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                <c:out value="${item.playersPoints}"/>
                &nbsp;</td>
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                <c:out value="${item.playersWins}"/>
                &nbsp;</td>
            </tr>
        </c:forEach>
    </table>
        <br/>
        <br/>
        <br/>
    </div>   
</body>
</html>

score 4 · Accepted Answer

CSS 计数器的默认值始终为 0，这不是您的问题。问题是您在遇到第一个值时将值增加到 1 tr。

有多种方法可以解决这个问题：

在属性期间将计数器的初始值分配为 -1 counter-reset。这意味着当tr遇到第一个时，计数器值从 -1 增加到 0，因此看起来好像标题行没有编号。

tr.odd {
  background-color: #FFFFFF
}
tr.even {
  background-color: #F2F2F2
}
table {
  counter-reset: rowNumber -1;
}
table tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  text-align: center;
}

<table>
  <tr>
    <th>Rank</th>
    <th>Name</th>
    <th>Points</th>
    <th>Wins</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

仅从tr遇到的第二个开始增加计数器值。这可以使用+(相邻兄弟选择器) 或~(一般兄弟选择器) 或nth-child(n+2). 使用其中之一意味着选择器将仅与tr表中的第二个和后续匹配。

tr.odd {
  background-color: #FFFFFF
}
tr.even {
  background-color: #F2F2F2
}
table {
  counter-reset: rowNumber;
}
table tr + tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  text-align: center;
}

<table>
  <tr>
    <th>Rank</th>
    <th>Name</th>
    <th>Points</th>
    <th>Wins</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

最佳和推荐的解决方案：将标题包装在 athead中，将内容包装tbody在其中并修改计数器递增的选择器。建议这样做，因为它为表格提供了适当的结构，并且看起来并不老套。

tr.odd {
  background-color: #FFFFFF
}
tr.even {
  background-color: #F2F2F2
}
table {
  counter-reset: rowNumber;
}
table tbody tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  text-align: center;
}

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Points</th>
      <th>Wins</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

css - 如何更改计数器增量的默认值？

1 回答 1

Related

Reference