CSS 相邻兄弟选择器答案

【问题标题】：CSS Adjacent Sibling SelectorCSS 相邻兄弟选择器
【发布时间】：2017-05-05 00:05:20
【问题描述】：

我试图让下一个li 元素在ul 之后有一个顶部边框。

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

尝试使用相邻兄弟选择器

相邻兄弟选择器选择与指定元素相邻的所有元素。兄弟元素必须有相同的父元素，“相邻”的意思是“紧随其后”。

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以将border-top 添加到li 和.productCatUlSub 中，并将边框底部添加到外部菜单.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>

【讨论】：