Как переопределить приоритет в классах CSS?

Question

• Главная
• Вариант 1
• Вариант 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

Вы можете использовать: first-child селектор в css:

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

Это находит первого дитя ул. Просто убедитесь, что он идет после общего случая li, чтобы он имел приоритет, или используйте! важный модификатор определения цвета / размера.

Answer 2

Вам нужно увеличить специфичность этого селектора , чтобы он переопределил правило с более низкой специфичностью селектора.

Поэтому, если вы назначаете класс элементу li, используйте #contentheader .cat li.class a, для элемента a используйте #contentheader .cat li a.class .