Question

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

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

            <h3><center><b>Categorieën</center></b></h3>
            <hr width="100%">
             @Html.Action("CategoryList", "Categorie")
        </div>

所以：

Categorieeen


销售！＆LT;＆LT;＆LT;颜色橙色

苹果

三星

到目前为止：

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

最简单的方法是，如果您可以在生成列表时向该特定行添加类或ID，然后将其用作CSS规则的选择器，但如果这不是一个选项，则必须求助于其他选择。

对于您给出的示例，确实有点难以说明，但如果“Sale！”始终是列表中的第一项，然后您可以使用:first-child伪类并构造如下的CSS规则：

li:first-child {
   color: #fc0;
}

为了使其更具体，要仅匹配包含类别的列表，您还可以通过向选择器添加一些父项来使规则更具体，例如： #menu li:first-child

Answer 2

类和ID名称不能以数字开头，因此这样的效果会起作用：

#category_0 {
    // styles
}

<li id="category_0">SALE!</li>

或者，您可以使用类别名称作为id（只要删除无效字符和空格）：

#SALE {
    // styles
}

<li id="SALE">SALE!</li>

来自数据库的特定Id的Css样式表？

2 个答案: