nth: child / of-type не работает на моем сайте

Question

Я думал, что у меня есть этот материал nth-child или nth-of-type, но почему-то он не работает на моем сайте.У меня http://www.dateworld.co.za/ и мне нужна 3-я вкладка, чтобы быть красным фоном, но почему-то этот код, похоже, не работает ...

Кто-нибудь может мне помочь?

 div#headernav ul li a {
 padding: 0px 16px;
 height: 30px;
 display: block;
 float: left;
 font: bold 12px/30px arial, verdana, sans-serif;
 color: #ffffff;
 text-transform:uppercase;
 text-decoration: none;
 margin-right:6px;
 background-color:#2274D9;
 }

 div#headernav ul li a:nth-of-type(3){
 height: 30px;
 display: block;
 background-color:#ff0000;
 }

Спасибо и всего наилучшего, Антон

Answer 1

Вам нужно использовать этот селектор вместо:

div#headernav ul li:nth-of-type(3) a

См .: http://jsfiddle.net/thirtydot/TJ6Lc/

Кроме того, вам не нужно nth-of-type, вы можете просто использовать nth-child:

div#headernav ul li:nth-child(3) a

http://jsfiddle.net/thirtydot/TJ6Lc/1/

---

Селектор, который вы использовали:

div#headernav ul li a:nth-of-type(3)

искал третий a элемент внутри li элемента, который не соответствует тому, что вы на самом деле пытаетесь найти.

Answer 2

Я не знаю вашу HTML-структуру, но должен ли ваш CSS быть примерно таким?

div#headernav ul li:nth-of-type(3) a{
 height: 30px;
 display: block;
 background-color:#ff0000;
 }

Answer 3

Попробуйте применить ваши стили к li, а не к a, поскольку элементы li содержат только one a, но ul содержит много li s:

div#headernav ul li:nth-child(3){
 height: 30px;
 display: block;
 background-color:#ff0000;
 }