Question

我认为代码正在计算＆＃34; Rank＆＃34;标题为一行并为其指定1。如何更改counter-increment的第一个数字？我希望这个表从0开始，以便＆＃34; Rank＆＃34;标题分配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>

Answer 1

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

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

在counter-reset属性期间将计数器的初始值指定为-1。这意味着当遇到第一个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>

最佳和推荐的解决方案：将标头包裹在thead内，tbody内的内容并修改计数器递增的选择器。这是推荐的，因为它为表提供了合适的结构，并且看起来并不像是hackish。

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>

如何改变反增量的默认值？

1 个答案: