html - 如何覆盖 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> (主页)有所不同，可能会将文本设置为其他颜色，或者可能将字体设置得更宽。我尝试直接将一个类分配给 <li>或<a>标签，但它不起作用，它总是采用 #contentheader .cat li a 中的样式类(class)。做这个的最好方式是什么？谢谢

Answer 1

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

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

这找到了 ul 的第一个 li child 。只需确保它位于一般 li 案例之后，以便它优先或使用 !颜色/尺寸定义的重要修饰符。