Как переопределить приоритет в классах 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

Вам необходимо увеличить specificity of that selector, чтобы он переопределил правило с более низкой специфичностью селектора.

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

Answer 2

Вы можете использовать: первый ребенок селектор в CSS:

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

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