CSS相邻兄弟选择器

Question

I'm trying to get the next li element to have a top border after a ul .

Just need Link 5 to have a border above and I'm not sure why it's not working.

Trying to use Adjacent sibling selectors

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

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

You can add a border-top to the li 's and to the .productCatUlSub 's, and a border-bottom to the outer menu .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>