Question

我正在使用这个构建在Bootstrap 3上的Wordpress主题，我希望菜单的最后一个孩子拥有不同的背景。

我试过了：

.nav > li:last-child > a {
  background: red; 
  padding-right: 0 !important;
}

这里是主题https://li.wordpress.org/themes/indreams/和代码：

<nav id="site-navigation" class="main-navigation text-center" role="navigation">
                            <div id="primary-menu" class="menu"><ul>
<li class="page_item page-item-2"><a href="https://wp-themes.com/?page_id=2">About</a></li>
<li class="page_item page-item-46 page_item_has_children"><a href="https://wp-themes.com/?page_id=46">Parent Page</a>
<ul class="children">
    <li class="page_item page-item-49"><a href="https://wp-themes.com/?page_id=49">Sub-page</a></li>
</ul>
</li>
</ul></div>
                        </nav>

找到它：

.main-navigation li:last-child{
    background: red!important;
}

由于

Answer 1

你可以试试这个。因为导航是标签而不是类，所以你不需要导航前的DOT

nav ul > li:last-child > a {
  background: red; 
  padding-right: 0 !important;
}

或者您可以看到此参考https://codepen.io/jasbir038/pen/VQrxEe

Answer 2

nav ul li:last-child > a {
 background: red; 
 padding-right: 0 !important;
}

最后的儿童背景颜色

2 个答案: