Question

下面你可以看到一个图像，它显示了我正在尝试实现的方法，我现在使用的方法，它只显示为每个数字1 ..我不知道如何为每个数字实现这个不同的数字交。

这是我当前的HTML，但我假设我想要的是用CSS来改变这个数字？

<div id="top_songs_section" class="item_box module">
    <h2 class="heading_title">Top Singles</h2>
    <ul>
        <li>
            <span class="rank">1</span>
            <div class="info">
                <div class="desc">
                    <a href="/s/26849/White_Iverson__Remix___feat__French_Montana___Rae_Sremmurd_" title="Post Malone - White Iverson (Remix) (feat. French Montana & Rae Sremmurd)">
                        <p class="title">White Iverson (Remix) (feat. French Montana & Rae Sremmurd)</p>
                        <p class="artist">Post Malone</p>
                    </a>
                    <a class="play btn song" song_id="26849" song_version_id="" album_id="" title="Post Malone - White Iverson (Remix) (feat. French Montana & Rae Sremmurd)">play</a>
                </div>
            </div>
        </li>                  
    </ul>
    <div class="sub_title group">
        <a class="see_all_btn" href="/most_popular">See all</a>
    </div>

Answer 1

你可以用计数器来实现这一点。 css的例子

ul {
  counter-reset: counter1;
}
ul li:before {
  content: counter(counter1);
  counter-increment: counter1;
}

这是jsfiddle：https://jsfiddle.net/9dcfjpnu/

浏览器支持很好http://caniuse.com/#feat=css-counters

P.S。我在p中的链接中将span更改为.desc，因为将链接中的块级元素视为不良做法。

P.P.S。您可以使用<ol>代替<ul>更轻松地实现此目的，因此如果可以，最好使用repzero的答案。

Answer 2

使用列表标记替换所有<p>标记，并使用css

替换样式

li {
  list-style-type:decimal;
}

这是一个片段

li {
  list-style-type:decimal;
}

<div id="top_songs_section" class="item_box module">
<h2 class="heading_title">Top Singles</h2>
<ul>
<li>
<span class="rank">1</span>
<div class="info">
<div class="desc">
<a href="/s/26849/White_Iverson__Remix___feat__French_Montana___Rae_Sremmurd_" title="Post Malone - White Iverson (Remix) (feat. French Montana & Rae Sremmurd)">
<li class="title">White Iverson (Remix) (feat. French Montana & Rae Sremmurd)</li>
<li class="artist">Post Malone</li>
</a>
<li class="play btn song" song_id="26849" song_version_id="" album_id="" title="Post Malone - White Iverson (Remix) (feat. French Montana & Rae Sremmurd)">play</li>
</div>
</div>
</li>

</ul>
<div class="sub_title group">
<a class="see_all_btn" href="/most_popular">See all</a>
</div>
</div>

为前10名职位添加数字

2 个答案: