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鄰接兄弟選擇器

回答

相關問題