CSS改变最后一个元素的样式

Question

在 wordpress 模板中我有导航菜单

<nav id="main-menu">
  <?php
  $home_url = home_url();
  $menu = wp_nav_menu(array('theme_location' => 'main', 'menu_id' => 'menu', 'echo' => false,                                           
  'menu' => 'LT')); 
  $menu = str_replace('#HOME_URL', $home_url, $menu);
  echo $menu;
  ?>
</nav>

我希望最后一个菜单链接是红色的，我试试这个

ul#main-menu li a:last-child{color: red;}

但它不起作用。

Answer 1

假设你的结构是这样的：

<ul id="main-menu">
    <li><a></a></li>
    <li><a></a></li>
</ul>

你必须使用：

#main-menu li:last-child > a { color: red; }

正如你所指的最后一个<li>-元素。