n番目の子はlast-of-typeと競合しますか？

Question

このスニペットでは

.post { border-bottom: 1px solid black; } 
 
.post:nth-child(2n) { background-color: #DDD; } 
 
.post:last-of-type { border-bottom: none; }

<div> 
 
    <div class="post">This is post 1.</div> 
 
    <div class="post">This is post 2.</div> 
 
    <div class="post">This is post 3.</div> 
 
    <div id="last">This is not a post! This is the last element here.</div> 
 
</div>

私はポスト3と最後の要素の間に境界線を削除します。

Answer 1

私は最終的に解決策に来た：

.post { border-bottom: 1px solid black; } 
 
.post:nth-child(2n) { background-color: #DDD; } 
 
.post:nth-last-child(2) { border-bottom: none; }

<div> 
 
    <div class="post">This is post 1.</div> 
 
    <div class="post">This is post 2.</div> 
 
    <div class="post">This is post 3.</div> 
 
    <div id="last">This is not a post! This is the last element here.</div> 
 
</div>

Answer 2

何last-of-classがないとして、あなたは戻って落下する必要がありますいずれかのJavascriptすべてのクラス化のdivにトップに国境を切り替えると、それを最初のものから取り除く。

div div { 
 
    height:50px; 
 
    background: pink; 
 
    } 
 

 
.post { 
 
    border-top: 1px solid black; 
 
} 
 
.post:nth-child(2n) { 
 
    background-color: #DDD; 
 
} 
 
.post:first-child { 
 
    border-top: none; 
 
}

<div> 
 
    <div class="post">This is post 1.</div> 
 
    <div class="post">This is post 2.</div> 
 
    <div class="post">This is post 3.</div> 
 
    <div id="last">This is not a post! This is the last element here.</div> 
 
</div>