css - 如何使用 css 而不是整个模型/菜单更改菜单/模型中的 1？

Question

以下代码从我们的数据库中获取我们的类别。 我们有一个名为:SALE!但是所有的颜色都一样.. 我的问题是，我怎么能对我的 .css “说”他只需要改变颜色:SALE! sale 的 id 为 0 和，Apple 1，Samsung 2 etc...

 <div id="maincontainer">
        <div id="menu">

            <h3><center><b>Categorieën</center></b></h3>
            <hr width="100%">
            <h7><a href="/Categorie/cat/0">SALE!</a></h7><br />
            <h7><a href="/Categorie/cat/1">Htc</a></h7><br />
            <h7><a href="/Categorie/cat/2">Apple</a></h7><br />            
        </div>
  </div>

所以:

Categorieeen

1. SALE! <<< colour orange
2. Apple
3. Samsung

到目前为止:

div#menu{float:left;width: 130px; min-height:inherit;background-color: #ffffff; border-width: .1em; border-style:solid; border-color: #0404B4; text-align:center; margin:0; padding:0px; }

但如我所料，整个菜单都变了，而不是促销!

Answer 1

您可以使用 CSS3 选择器 nth-of-type . 如果您的输出是一个列表，那么要更改第一个

元素，您需要添加:

div#menu h7:nth-of-type(1) a {color:#ff0000;}

你可以在这个fiddle中查看

'编辑类以定位列表元素内的链接