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> (Home) 有所不同，可能使文本为其他颜色，或者可能使字体更宽。我尝试将一个类直接分配给 <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 案例之后，以便它优先或使用 !颜色/尺寸定义的重要修饰符。