特定のクラスを持つすべての要素にCSSルールを適用しますが最後に

Question

このデモをご覧になり、CSSルールをすべて.boxに適用できますが、最後のCSSルールに適用することはできませんか？

私はすでに:not(:last-of-type)と:not(:last-child)を試してみましたが、彼らは

.box{ 
 
    height:40px; 
 
    width:100%; 
 
    padding:12px; 
 
} 
 
.box:not(:last-of-type){ 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.box:not(:last-child){ 
 
    border-bottom: 1px solid #ddd; 
 
}

<div class="box">Box 1</div> 
 
<div class="box">Box 2</div> 
 
<div class="box">Box 3</div> 
 
<div class="box">Box 4</div>

Answer 1

を以下のようなスタイル

チェックこのスニペット

.box { 
 
    height: 40px; 
 
    width: 100%; 
 
    padding: 12px; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.box:last-of-type { 
 
    border:none ; 
 
}

<div class="Wrapper"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
    <div class="box">Box 4</div> 
 
</div>

または

あなたは

.box { 
 
    height: 40px; 
 
    width: 100%; 
 
    padding: 12px; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.box:last-child { 
 
    border:none; 
 
}

<div class="Wrapper"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
    <div class="box">Box 4</div> 
 
</div>

としての最後の子を使用することができます10

希望する場合は

Answer 2

仕事をしていません。このお試しください：親要素とそれを包む試してみて、適用してみてください

.box { 
    height: 40px; 
    width: 100%; 
    padding: 12px; 
    border-bottom: 1px solid #ddd; 
} 

.box:last-child { 
    border-bottom: 0; 
} 

Answer 3

:not(:last-child)を別の部門にラップしてください。それ以外の場合、ブラウザーはどちらが最後の子かを識別できません。

.box{ 
 
    height:40px; 
 
    width:100%; 
 
    padding:12px; 
 
} 
 

 
.box:not(:last-child){ 
 
    border-bottom: 1px solid #ddd; 
 
}

<div> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
    <div class="box">Box 4</div> 
 
</div>

それはすべてにスタイルを与え、その後.boxにborder: 1pxを与え、.box:last-childにborder: none;を与えるようlast-childのスタイルの別のセットを与えることによって、スタイルの上書きを使用することを暗示しません。これはスタイルを上書きしています