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

Question

在wordpress模板中我有导航meniu

<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> - 元素时。