时间戳

首页 > 解决方案 > CSS nth-child 问题

html - CSS nth-child 问题

问题描述

我只需要为 编写 css <span class="number">200</span>，下面我给出了我使用的 CSS 代码，但它不起作用，

这是一个例子：

.statistics-inner div.stat span.number:nth-child(3){
font-size: 38px!important;
}
<div class="stat" data-count="1200">
<span class=""></span>
<span class="number">1200</span>
<span class="count-title">LINES OF CODES THIS MONTH</span>
</div>

<div class="stat" data-count="4800">
<span class=""></span>
<span class="number">4800</span>
<span class="count-title">TEST CASES WRITTEN</span>
</div>

<div class="stat" data-count="200">
<span class=""></span>
<span class="number">200</span>
<span class="count-title">INCREMENTAL RELEASE THIS YEAR</span>
</div>

<div class="stat" data-count="1000">
<span class=""></span>
<span class="number">1000</span>
<span class="count-title">COFFEE &amp; TEA CUPS</span>
</div>

标签： htmlcss

解决方案

nth-child(n)需要添加到div.stat：

.statistics-inner div.stat:nth-child(3) span.number {
    font-size: 38px!important;
}

编辑：

data-count如果是静态的而不是动态的，还有属性选择器

.statistics-inner div.stat span.number[data-count="200"] {
    font-size: 38px!important;
}

推荐阅读