问题
那种每个标签字体大小不一致的标签云，CSS 都怎么写？
貌似应该写在 HTML 里，比如
<a href="XXX" style="font-size: 11px;">Ad</a>
问题是，这个 font-size 大小变化有没有什么公式？ 或是把一串经验之作写成一个 Array（比如 [11, 13, 12, 9, 8 ]）, 生成不同每个 tag 从这 Array 中按顺序取它的 font-size 值？
解决方案
方案一：放弃纯 CSS 的想法，考虑用jquery.tagcloud.js.
方案二： 我自己想的，是否有点笨拙？
<% @font_size = [16,22,15,13,12,23,18,12,13,13,15,17,13,14,12,15,12,13,12,13,13,20,12,31,23,12,20,19,14,19,12,17,15,17,14,24,15,12,11,11,19,15,15,21,16]
%>
<% @text = 1..45 %>
<% @text.each_with_index do|item,index| %>
<%= link_to "测试#{item}", "#", style: "font-size:#{@font_size[index]}px;" %>
<% end %>
或
<section class="tag_cloud">
<header><h2>热门标签</h2></header>
<ul class="list-unstyled">
<% @text = 1..45 %>
<% @text.each do %>
<li>
<%= link_to "测试", "#",style: "font-size:#{cycle(16,22,15,13,23,18,12,13,15,17,13,12,15,13,20,12,31,23,12,20,19,12,15,17,13)}px;" %>
</li>
<% end %>
</ul>
</section>
虽然你不能动态的写不同的标签，但是你可以动态的生成 css
页面上的 class 不用变
<a href="xxx" class="advice">
<a href="xxx" class="humor">
生成的 css 根据你自己的规则
.advice {
font-size: $xxx;
}
.humor {
font-size: $yyy;
}
heimirror
#21
2014年02月28日
modacker
#24
2014年03月05日
我姑且认为你的每个 tag 是被 span 包裹着的，那么，为什么不用:first-child 来定义？
span:first-child { color: red; } span:first-child + span { color: blue; } span:first-child + span + span{ color: green; } some text some text some text some text