html - 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，并将 border-bottom 添加到外层菜单 .productCatUl

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

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