CSS相鄰兄弟選擇器

Question

我正在嘗試讓下一個li元素在ul之后具有頂部邊框。

只需要鏈接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

您可以在li和.productCatUlSub的border-top添加border-top ，在外部菜單.productCatUl的底部添加邊框.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>