Question

所以这是我在tumblr http://i.stack.imgur.com/PdULA.png上的代码页（链接到页面http://lcvegoocl.tumblr.com/navigation的实时视图）

所以我想让第三和第五个标签更短（＆＃34;字符＆＃34;一个位于＆＃34;哈利波特＆＃34;一个和＃34;艺术家/乐队＆＃34;一个在＆＃34;音乐＆＃34;）下面，它们看起来像子类别

这里是CSS

.link label{
color: #999; /*Change the list titles color*/
letter-spacing: 2px;
font-size: 8px;
line-height: 14px;
font-weight: bold;
background-color: #ffffff; /*Change the list titles background color*/
width:175px;
padding: 5px;
text-transform: uppercase;
height: 15px;
text-align: center;
cursor: pointer;
display: block;
margin-bottom: 10px;
}

.link label:hover {
border-left: solid 10px #2A623D; /*Change the list titles left border  color*/
width: 165px;
color: #666; /*Change the list titles color when hover*/
}

[type=radio]:checked ~ label {
z-index: 2;
border-left: solid 10px #1A472A;/*Change the list titles left border color when checked*/
color: #666;/*Change the list titles color when checked*/
width: 165px;
}

.link [type=radio] {
display: none;  
}

.contenido {
color: #999;
background-color: #ffffff;
float:right;
width: 183px;
margin-top: -30px;
margin-left: 255px;
height: 320px;
padding: 10px;
overflow: scroll;
text-align: justify;
position: absolute;
top:30px;
left:-60px;
}

.contenido a {
color: #999;  /*Change the links color*/
padding: 3px;
font-size: 8px;
margin-bottom: 2px;
display: block;
text-decoration: none;
text-transform: uppercase;
}

.contenido a:hover {
letter-spacing: 2px;
border-bottom: solid 2px #666; /*Change the links bottom border color when hover*/
text-align:center;
color: #666; /*Change the links color when hover*/
font-weight: bold;
padding: 2px;

}

[type=radio]:checked ~ label ~ .contenido {
z-index: 1;
}

以及整个链接表的匹配html

<div class="link">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">tags</label>
<!----Change the list title!---->

<div class="contenido">

如果有什么不清楚，请在下面留下评论，我会解决它

Answer 1

您可以使用nth-ot-type()选择器：

.link:nth-of-type(3) label,
.link:nth-of-type(5) label{
    font-size: 10px;
}

Answer 2

尝试使用CSS3 :nth-child() Selector

p:nth-child(4),
p:nth-child(5)  {
    font-size: 10px;
}

如何在tumblr上制作不同大小的链接标签

2 个答案: