CSS邻接兄弟选择器

我试图让下一个li元素在ul之后具有顶部边框。CSS邻接兄弟选择器

只需要链接5上面有一个边框，我不知道为什么它不工作。

尝试使用相邻同胞选择

相邻兄弟选择器选择是指定元件的相邻的兄弟姐妹的所有元素。兄弟元素必须具有相同的父元素，“相邻”表示“紧随其后”。

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

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

来源

2017-05-04 user4367436

您可以添加一个border-top到li的，并于.productCatUlSub的，和底部边框的外菜单.productCatUl

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

来源

2017-05-04 15:46:43

非常感谢！ – user4367436

@ user4367436真棒不客气:) –

CSS邻接兄弟选择器

回答

相关问题