如何覆盖CSS类中的优先级？

Question

                
•                     Home                 
                
•                     Option 1                 
                
•                     Option 2                 
            

             

我将这些样式应用于此类

#contentheader .cat {
border-top:3px solid #ccc;
background-color:#eee;
overflow:hidden;
}

#contentheader .cat li a {
color:#999;
font-weight:700;
text-decoration:none;
font-size:13px;
display:block;
border-right:1px solid #fff;
float:left;
padding:10px;
}

#contentheader .cat li a:hover {
background-color:#E9E9E9;
}

问题在于我需要第一个<li>（Home）不同，可能会以其他颜色制作文本，或者可能使字体更宽。我尝试将一个类直接分配给<li>或<a>标记，但它不起作用，它总是采用#contentheader .cat li a类中的样式。做这个的最好方式是什么？感谢

Answer 1

您可以在css中使用：first-child选择器：

#contentheader .cat ul li:first-child a {
    color: red;
}

找到了ul的第一个孩子。只要确保它出现在一般情况下，以便它优先或使用！关于颜色/大小定义的重要修饰符。

Answer 2

您需要增加specificity of that selector以使其覆盖选择器特异性较低的规则。

因此，如果您将班级分配给li元素，请对#contentheader .cat li元素使用.class a a ，使用#contentheader .cat li a .class 。