11

ここに画像の説明を入力してください

ul li:first-child a {
   border-radius: 5px 5px 0 0;
}

ul li:last-child a {
   border-radius: 0 0 5px 5px;
}

子が1つしかない場合、最後の子のスタイルが最初の子のスタイルを上書きします。両方を適用する方法はありますか（最初と最後の両方の子であるため）

JSの助けを借りずに、CSSだけでこれを達成しようとしています。ありがとう。

4

4 に答える 4

19

境界線を個別に適用するだけです。

ul li:first-child a {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

ul li:last-child a {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

このようにして、最後に適用されたルールが前のルールを上書きしません（border-radius: 5px 5px 0 0;下の境界線の半径をゼロにリセットします）。

デモ： http： //jsfiddle.net/vUz5Z/5/

于 2012-07-18T09:13:46.407 に答える
6

を使用できます:only-child。追加するだけ

ul li:only-child a {
   border-radius: 5px;
}

それらの後。IE8（またはそれ以前）ではborder-radius動作しませんが、IE8でも動作しないため、問題ではないと思います。

ul {border-radius: 5px}または、可能であれば、リスト自体の境界線の半径を使用します。

于 2012-07-18T09:23:12.183 に答える
1

代わりに、境界線の半径をコンテナに配置してみませんか？

ul,li { margin:0; padding:0; list-style:none; }
ul { border-radius: 10px; overflow:hidden }
a { display:block; margin-bottom:2px; padding:3px; background-color:#f00 }
ul li:last-child a {
 margin: 0;
} ​

http://jsfiddle.net/BanEg/

于 2012-07-18T09:18:19.197 に答える
1

0px値の自動インシードを使用することもできます。元。（以下）：

&:first-child{
    .border-radiuses (5px, auto, auto, 5px);

}
&:last-child{
    .border-radiuses (auto, 5px, 5px, auto);
}
于 2013-01-07T09:53:47.097 に答える