CSS last-child 不在菜单中工作

Question

我有一个网站正在开发中，我正在尝试使用 :last-child 命令删除导航菜单上的右边框：http://new.solacetree.org/

.main-navigation .main-nav ul li a {
    border-right: 1px solid #fff;
}

.main-navigation .main-nav ul li a:last-child {
    border-right: 0 none;
}

我还尝试了相反的方法，尝试为第一个子项添加左边框，但它也不起作用：

.main-navigation .main-nav ul li a:first-child {
    border-left: 1px solid #fff;
}

HTML:

<div class="main-nav"><ul class="menu sf-menu sf-js-enabled" id="menu-main-navigation"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1836" id="menu-item-1836"><a href="http://new.solacetree.org/?page_id=70" class="sf-with-ul">About Us</a><a aria-expanded="false" class="dropdown-toggle" href="#"><i class="fa fa-caret-down"></i></a>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1852" id="menu-item-1852"><a href="http://new.solacetree.org/?page_id=1793">Letter from Emilio</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1853" id="menu-item-1853"><a href="http://new.solacetree.org/?page_id=1800">Our History</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1854" id="menu-item-1854"><a href="http://new.solacetree.org/?page_id=186">Board Members</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1855" id="menu-item-1855"><a href="http://new.solacetree.org/?page_id=120">Contributors</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1856" id="menu-item-1856"><a href="http://new.solacetree.org/?page_id=1803">Testimonials</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1867" id="menu-item-1867"><a href="http://new.solacetree.org/?page_id=118">FAQs</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1864" id="menu-item-1864"><a href="http://new.solacetree.org/?page_id=372">Brochures</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1857" id="menu-item-1857"><a href="http://new.solacetree.org/?page_id=124">Contact Us</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1837" id="menu-item-1837"><a href="http://new.solacetree.org/?page_id=33" class="sf-with-ul">Grief Support Programs</a><a aria-expanded="false" class="dropdown-toggle" href="#"><i class="fa fa-caret-down"></i></a>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1861" id="menu-item-1861"><a href="http://new.solacetree.org/?page_id=16">Solace Kids (2-5)</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1860" id="menu-item-1860"><a href="http://new.solacetree.org/?page_id=1809">Kids Helping Kids (6-13)</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1838" id="menu-item-1838"><a href="http://new.solacetree.org/?page_id=841">Hearts for Teens (14-18)</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1839" id="menu-item-1839"><a href="http://new.solacetree.org/?page_id=27">Adults (18 +)</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1859" id="menu-item-1859"><a href="http://new.solacetree.org/?page_id=1569">Camp Hope (Summer)</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1840" id="menu-item-1840"><a href="http://new.solacetree.org/?page_id=1314" class="sf-with-ul">Good Grief Program</a><a aria-expanded="false" class="dropdown-toggle" href="#"><i class="fa fa-caret-down"></i></a>
    <ul class="sub-menu" style="display: none;">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1872" id="menu-item-1872"><a href="http://new.solacetree.org/?page_id=1338">Good Grief Flyer</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1869" id="menu-item-1869"><a href="http://new.solacetree.org/?page_id=812">Join A Support Group</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1873" id="menu-item-1873"><a href="http://new.solacetree.org/?page_id=1172">Virtual Solace</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1841" id="menu-item-1841"><a href="http://new.solacetree.org/?page_id=98" class="sf-with-ul">Training</a><a aria-expanded="false" class="dropdown-toggle" href="#"><i class="fa fa-caret-down"></i></a>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1862" id="menu-item-1862"><a href="http://new.solacetree.org/?page_id=55">Volunteer Training</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1849" id="menu-item-1849"><a href="http://new.solacetree.org/?page_id=1819">Community Education</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1842" id="menu-item-1842"><a href="http://new.solacetree.org/?page_id=1821" class="sf-with-ul">Publications &amp; Resources</a><a aria-expanded="false" class="dropdown-toggle" href="#"><i class="fa fa-caret-down"></i></a>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1848" id="menu-item-1848"><a href="http://the-solace-tree.myshopify.com/">Books</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1843" id="menu-item-1843"><a href="http://new.solacetree.org/?page_id=94">Videos</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1844" id="menu-item-1844"><a href="http://new.solacetree.org/?page_id=1773">Articles</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1877" id="menu-item-1877"><a href="http://new.solacetree.org/?page_id=96">Recommended Reading</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1879" id="menu-item-1879"><a href="http://new.solacetree.org/?page_id=974">Find a Grieving Center</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1880" id="menu-item-1880"><a href="http://new.solacetree.org/?page_id=112">Grieving During the Holidays</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1845" id="menu-item-1845"><a href="http://new.solacetree.org/?page_id=64" class="sf-with-ul">Ways to Help</a><a aria-expanded="false" class="dropdown-toggle" href="#"><i class="fa fa-caret-down"></i></a>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1851" id="menu-item-1851"><a href="http://new.solacetree.org/?page_id=57">Upcoming Events</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1850" id="menu-item-1850"><a href="http://new.solacetree.org/?page_id=1826">Donate</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1846" id="menu-item-1846"><a href="http://new.solacetree.org/?page_id=513">Supplies Needed</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1847" id="menu-item-1847"><a href="http://new.solacetree.org/?page_id=180">Be a Volunteer</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1871" id="menu-item-1871"><a href="http://new.solacetree.org/?page_id=53">Other Ways to Volunteer</a></li>
</ul>
</li>
</ul></div>

我是否遗漏了 last-child 和 first-child 选择器的内容？

Answer 1

由于每个 a 都在它自己的 li 标签中，您不能使用此选择器定位它们，但是，您可以将其应用于 li 本身：li:first-child{<...>}.

Answer 2

是的。 HTML 绝对有帮助。你可以试试 .sf-menu > li:last-child > a:first-child 可以翻译成：

.sf-menu --> 在.sf-menu
> li --> 找到所有立即数 li children （但不是 grandchildren，如果有）
:last-child --> 获取最后一个 li
> a 获取 li 下面的直接锚
:first-child --> 获取第一个锚点

我建议如此具体的原因是双重的：

如果锚点上没有 :first-child，您可能运行会遇到麻烦，因为所有的兄弟链接也会得到这种样式。
此外，不使用 > 会导致您立即检索 children 而不是 grandchildren。

CSS last-child 不在菜单中工作

CSS last-child not working in menu

html

css

wordpress

css-selectors