は `ホバー`にあります - 異なるシナリオで子供たちの `border-radius`をどう扱うのですか？

Question

私は子供がいる親がaです。ユーザーmouse over私は子供のボーダーの色を赤に変更しています。できます。

私の問題は、子供の長さは静的ではありません。それは動的です。私は、左の境界線を追加していradius両方firstとlastが、どのようにsecondとlastにright-radiusを追加するには？

.parent { 
 
    border:5px solid red; 
 
    display:inline-block; 
 
    position: relative; 
 
    border-radius:5px; 
 
    box-sizing:border-box; 
 
    margin-bottom:3em; 
 
} 
 

 
.parent a { 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
    position: relative; 
 
    width:50%; 
 
    float:left; 
 
    box-sizing:border-box; 
 
} 
 

 
.parent a:nth-child(odd):hover{ 
 
    border:5px solid #ddd; 
 
    margin: -5px; 
 
} 
 

 
.parent a:nth-child(even):hover{ 
 
    border:5px solid #ddd; 
 
    margin: -5px; 
 
    left:10px; 
 
} 
 

 
.parent a:first-of-type{ 
 
    border-top-left-radius:5px; 
 
} 
 

 
.parent a:last-of-type{ 
 
    border-bottom-left-radius:5px; 
 
}

<div class="parent"> 
 
     <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a> 
 
    </div> 
 
    
 
    <div class="parent"> 
 
     <a href="#">1</a><a href="#">2</a><a href="#">3</a> 
 
    </div> 
 
    
 
     <div class="parent"> 
 
     <a href="#">1</a> 
 
    </div>

を（以来、私は子供の数を知らない）、またはこれを処理するための正しい方法は何ですか？

あなたは以下を使用することができますし、あなたの例のすべてがソートされなければならない

Answer 1

：ここ

.parent { 
    border:5px solid red; 
    display:inline-block; 
    position: relative; 
    border-radius:5px; 
    box-sizing:border-box; 
    margin-bottom:3em; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-bottom:1px solid #ddd; 
    position: relative; 
    width:50%; 
    float:left; 
    box-sizing:border-box; 
} 

.parent a:nth-child(odd):hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
} 

.parent a:nth-child(even):hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
    left:10px; 
} 

.parent a:first-of-type{ 
    border-top-left-radius:5px; 
} 

.parent a:nth-child(2) { /* second child */ 
    border-top-right-radius:5px; 
} 

.parent a:last-of-type:nth-child(even){ 
    border-bottom-right-radius:5px; 
} 

.parent a:last-of-type:nth-child(odd){ 
    border-bottom-left-radius:5px; 
} 

.parent a:nth-last-child(2):nth-child(odd) { 
    border-bottom-left-radius: 5px; 
} 

はjsfiddleである：ここでは https://jsfiddle.net/67hr0oax/4

は削除ジャーキネスの一部とアップデートです： https://jsfiddle.net/67hr0oax/7/

注：ブラウザのサポートは、IE9以上の場合のみです。

Answer 2

あなたの行の要素の数が "動的"であると言うとき、私はCSSがこのような複雑さを処理するように設計されているとは思いません。

要素の数を静的に保つと、おそらく:nth-last-child(),:nth-child()の組み合わせを使用してボーダー半径を適用できます。

だから明らかにあなたのオプションはJavaScriptを使用して、処理に限定されているように見えます。あなたも、これは動作します<a>&nbsp;</a>追加により、要素数を保つ限り

Answer 3

。

外側の境界線が停止することで、いくつかのchinksがあったが、彼らはときにマウスオーバー周りのブロック全体のジャンプを停止するためにそこにいるけど。

.parent, 
 
.parent a { 
 
    position: relative 
 
} 
 
.parent { 
 
    display: inline-block 
 
} 
 
.parent a { 
 
    display: block; 
 
    padding: 1em; 
 
    width: 50%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border: 5px solid transparent; 
 
    background: #fff 
 
} 
 
.parent a:nth-child(1) { 
 
    border-top-left-radius: 5px; 
 
    border-top: solid red 5px 
 
} 
 
.parent a:nth-child(2) { 
 
    border-top-right-radius: 5px; 
 
    border-top: solid red 5px 
 
} 
 
.parent a:nth-child(even) { 
 
    border-right: solid red 5px 
 
} 
 
.parent a:nth-child(odd) { 
 
    border-left: solid red 5px 
 
} 
 
.parent a:last-child { 
 
    border-bottom-right-radius: 5px; 
 
    border-bottom: solid red 5px 
 
} 
 
.parent a:nth-last-child(2) { 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom: solid red 5px 
 
} 
 
.single a { 
 
    border-radius: 5px; 
 
    border: 5px solid red 
 
} 
 
.parent a:hover { 
 
    border-color: #00f 
 
}

<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a href="#">4</a> 
 
    <a href="#">5</a> 
 
    <a>&nbsp;</a> 
 
</div> 
 

 
<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a>&nbsp;</a> 
 
</div> 
 

 
<div class="single parent"> 
 
    <a href="#">1</a> 
 
</div>