文本字符串中的特殊性

Question

我喜欢认为我对特异性非常熟练，但出于某种原因，这一点让我感到懊恼。这是我的难题：

假设您有一个这样的列表：

<ul class="dates">
    <li><a href="#">1994/05</a></li>
    <li><a href="#">1999/05</a></li>
    <li><a href="#">2001/05</a></li>
    <li><a href="#">2005/05</a></li>
    <li><a href="#">2014/05</a></li>            
</ul>

css（风格方面，而非特异性方面）在这里是无关紧要的，所以我会跳过它。但基本上，它看起来像这样：

我的意思是，我想定位＆＃34;月份部分＆＃34;这是05.我希望它小几个像素。这些是我失败的尝试。他们甚至可能都不存在，你可以随心所欲地笑，但它却因为没有做我想做的事而大吼大叫电脑大声笑。

Answer 1

您可以使用jQuery将月份包装在span元素中，如下所示：

$('.dates > li > a').html(function(i,oldHTML){
  return oldHTML.replace(/[/](\d{1,2})/, "/<span class='month'>$1</span>");
});

Demo.

Answer 2

使用额外的<span>加上额外的类来解决这个问题。

<强> HTML

<ul class="dates">
  <li><a href="#">1994/<span class="text-small">05</span></a></li>
  <li><a href="#">1999/<span class="text-small">05</span></a></li>
  <li><a href="#">2001/<span class="text-small">05</span></a></li>
  <li><a href="#">2005/<span class="text-small">05</span></a></li>
  <li><a href="#">2014/<span class="text-small">05</span></a></li>            
</ul>

<强> CSS

.text-small {
  font-size: 10px
}

<强> RESULT

DEMO

Answer 3

试试这个：

<ul class="dates">
        <li><a href="#"><span class="year">1994/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">1999/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">2001/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">2005/</span><span class="month">05</span></a></li>
        <li><a href="#"><span class="year">2014/</span><span class="month">05</span></a></li>            
    </ul>

    <style>
    .year {
    font-size: 12px;
    }

    .month {
    font-size: 10px;
    }
    </style>