css - last-child 不为导航菜单工作想要取出内容 : "- "

Question

last-child 没有作用在nav 上，我想把last-child 的内容“-”去掉

.main-navigation {
	clear: both;
	margin: 0 auto;
	max-width: 1140px;
	min-height: 45px;
	position: relative;
	text-align: center;
}

ul.nav-menu,
div.nav-menu > ul {
	margin: 0;
	padding: 0 40px 0 0;
}

.nav-menu li {
	display: inline-block;
	position: relative;
}

.nav-menu li a {
	color: #d76b02;
	display: block;
	font-size: 15px;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
	text-transform: capitalize;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
	/*background-color: #220e10;*/
	color: #d76b02;
	/*font-weight: bold;;*/
}

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #220e10;
	border: 2px solid rgba(247, 245, 231, 1);
	border-top: 0;
	color: #fff;
	display: none;
	float: left;
	padding: 0;
	position: absolute;
	left: -2px;
	top: 45px;
	z-index: 99999;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
	border-left: 0;
	left: 100%;
	top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
	color: #fff;
	margin: 0;
	width: 200px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
	background-color: #db572f;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
	display: block;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: #bc360a;
	font-weight: bold;
}

.menu-toggle {
	display: none;
}

.nav-menu li a:after {
    content: " - ";
    margin-left: 30px;
}

.nav-menu ul:last-child li:last-child a:last-child {
	background-color: : red;

}

/* Navbar */
.navbar {
	background-color: #fff;
	margin: 0 auto;
/*	max-width: 1600px; */
	width: 100%;
	margin-top: -22px;
	border-bottom: 1px solid  #d76b02;
}

<div id="navbar" class="navbar site-boxed">
  <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <h3 class="menu-toggle">Menu</h3>
    <a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
    <div class="menu-test-container">
      <ul id="menu-test" class="nav-menu">
        <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://localhost/my-account/">My Account</a></li>
        <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://localhost/checkout/">Checkout</a></li>
        <li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://localhost/cart/">Cart</a></li>
        <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://localhost/shop/">Shop</a></li>
        <li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-146 current_page_item menu-item-148"><a href="http://localhost/">Home Page</a></li>
      </ul>
    </div>
  </nav>
</div>

我已经添加了尽可能多的代码，我已经尝试了很多东西但都没有奏效。

我正在尝试向我的站点添加菜单，但我不希望最后一个子项具有内容:“-”；

https://jsfiddle.net/hazephase/fabgx9tt/

Answer 1

您需要在 ul 中访问 li 的 last-child 而不是作为 last-child 的 ul

nav ul li:last-child a:after {
    content: "";
}

这里是 fiddle