Question

我以为我有这个n-child或nth-of-type的东西，但不知何故它似乎在我的网站上不起作用。我有http://www.dateworld.co.za/并且需要第三个标签为红色背景，但不知何故这个代码似乎不起作用......

有人能帮助我吗？

 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元素仅包含一个 a，但{ {1}}包含许多ul s：

li

nth：child / of-type似乎不适用于我的网站

3 个答案: