CSS相邻的兄弟选择器

Question

我正在尝试让下一个li元素在ul之后有一个上边框。

只需要Link 5上面有一个边框，我不确定它为什么不起作用。

尝试使用相邻的兄弟选择器

相邻的兄弟选择器选择与指定元素相邻的兄弟元素的所有元素。 同级元素必须具有相同的父元素，“邻近”表示“紧跟其后”。

Codepen

.productCatUl {
	font-size: 14px;
	list-style: none;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
}
.productCatUlSub {
	list-style: none;
	padding-left: 12px;
}
.productCatUl a {
	text-decoration: none;
	text-transform: uppercase;
	text-decoration: none;
	color: #999999;
	display: block;
}
.productCatUl a:hover {
	color: #1957a7;
	padding-left: 3px;
}
.productCatUl > li:first-child {
	border-top: 1px #999999 solid;
}
.productCatUl> li >a {
	border-bottom: 1px #999999 solid;
	padding-top: 3px;
	padding-bottom: 3px;
}
.productCatUlSub li a {
	border-bottom: 0;
}
.productCatUl li + .productCatUl li {
	border-top: 1px #999999 solid;
}

<ul class="productCatUl">
	  <li><a href="#">Link 1</a></li>
	  <li><a href="#">Link 2</a></li>
	  <li><a href="#">Link 3</a></li>
	  <li><a href="#">Link 4</a>
		<ul class="productCatUlSub">
		  <li><a href="#">Sub Link 1</a></li>
		  <li><a href="#">Sub Link 2</a></li>
		  <li><a href="#">Sub Link 3</a></li>
		  <li><a href="#">Sub Link 4</a></li>
		  <li><a href="#">Sub Link 5</a></li>
		</ul>
	  </li>
	  <li><a href="#">Link 5</a></li>
	  <li><a href="#">Link 6</a></li>
	  <li><a href="#">Link 7</a></li>
	  <li><a href="#">Link 8</a></li>
</ul>

Answer 1

您可以向border-top和li添加.productCatUlSub，在外部菜单{{1>边框底部添加.productCatUl }}

＆＃13;

＆＃13;

.productCatUl {
	font-size: 14px;
	list-style: none;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
}
.productCatUlSub {
	list-style: none;
	padding-left: 12px;
}
.productCatUl a {
	text-decoration: none;
	text-transform: uppercase;
	text-decoration: none;
	color: #999999;
	display: block;
}
.productCatUl a:hover {
	color: #1957a7;
	padding-left: 3px;
}
.productCatUl > li, .productCatUlSub {
	border-top: 1px #999999 solid;
}
.productCatUl {
  border-bottom: 1px solid #999;
}
.productCatUl> li >a {
	padding-top: 3px;
	padding-bottom: 3px;
}
.productCatUlSub li a {
	border-bottom: 0;
}
.productCatUl li + .productCatUl li {
	border-top: 1px #999999 solid;
}

＆＃13;

<ul class="productCatUl">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a>
    <ul class="productCatUlSub">
      <li><a href="#">Sub Link 1</a></li>
      <li><a href="#">Sub Link 2</a></li>
      <li><a href="#">Sub Link 3</a></li>
      <li><a href="#">Sub Link 4</a></li>
      <li><a href="#">Sub Link 5</a></li>
    </ul>
  </li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;