Question

我试图仅改变第三种颜色，但出于某种原因，css nth-of-type不起作用......

    ul li a:nth-of-type(3){
        color: #111111;
    }

 <ul>
        <li class="nav_menu"><a id="currentlink" href="#">HOME PAGE</a></li>
        <li class="nav_menu"><a href="homework/homework2/index.html">II</a></li>
        <li class="nav_menu"><a href="#">III</a></li>
        <li class="nav_menu"><a href="#">IV</a></li>
        <li class="nav_menu"><a href="#">V</a></li>
        <li class="nav_menu"><a href="#">VI</a></li>
        <li class="nav_menu"><a href="#">VII</a></li>
        <li class="nav_menu"><a href="#">VIII</a></li>
        <li class="nav_menu"><a href="#">IX</a></li>
        <li class="nav_menu"><a href="#">X</a></li>
    </ul>

我该如何解决这个问题？谢谢你的帮助。

Answer 1

应该是：

ul li:nth-of-type(3) a {
    color: #111111;
}

您想要第三个a内的li标记。

Answer 2

<li>和a

的列表

ul li:nth-of-type(3) a{
    color: #111111;
}

https://jsfiddle.net/d8oz6qbu/

Answer 3

您正在css中选择 a 标记，而您需要选择第三个列表项。不是第三个 a 标记

尝试

ul li:nth-child(3) {
    color: #111111;
}

或

ul li:nth-child(3) a {
  color: #111111;
}

Answer 4

nth-of-type定位指定元素parent的第n个子节点（相同类型）。

所以你的css：

ul li a:nth-of-type(3){
    color: #111111;
}

定位了li的第三个孩子，因为li只有一个孩子a

而不存在

你想要的是：

ul li:nth-of-type(3) a{
    color: #111111;
}

定位ul的{{1}}的第3个孩子，然后更改后面的所有li个标签的颜色。

段：

ul li:nth-of-type(3) a{
    color: #111111;
}

Answer 5

添加以下代码，

    @RequestMapping(value = "/admin", method = RequestMethod.GET)
    public String admin(Model model) {
    Authentication authentication =SecurityContextHolder.getContext().getAuthentication();

    model.addAttribute("name",authentication.getName());

    retrun "admin" ;

    }

CSS nth-child不起作用

5 个答案: