0
要素の先頭に、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>
ありがとうございます。 – user4367436
@ user4367436あなたは大歓迎です:) –