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

Question

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

 <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>

所以：

分类

1. 销售！<<<颜色橙色
2. 苹果
3. 三星

至今：

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;}

你可以在这个小提琴中检查它

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