CSS的后代无法在菜单中工作

Question

I have a site under development and am trying to use the :last-child command to remove the right border on my navigation menu here: 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;
}

I also tried the opposite by attempting to add a left border to the first child and it doesn't work either:

.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>

Am I missing something with the last-child and first-child selectors?

Answer 1

由于每个a都位于其自己的li标记内，因此无法使用此选择器定位它们，但是可以将其应用于li本身： li:first-child{<...>} 。

Answer 2

Yes. The HTML definitely helps. You can try .sf-menu > li:last-child > a:first-child which can be translated to:

• .sf-menu --> in the .sf-menu
• > li --> find all the immediate li children (but not grandchildren, if there are any)
• :last-child --> get the last li
• > a get the immediate anchors below the li
• :first-child --> get the first anchor

the reason, I recommend it to be so specific, is twofold:

• If you don't have the :first-child on the anchor, you will possibly run into troubles because all the sibling links will also get this style.
• In addition, not using > causes you to retrieve just immediate children instead of grandchildren.