css - クラスの最後の子が機能しない

Question

<div class='container'>
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>$row[info]</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

クラス情報用のボーダーボトムがあります：

.info {padding-bottom: 10px;  border-bottom: 1px dashed #C8C8C8;}

しかし、最後の子の境界線は必要ありませんが、機能していません。すべての境界線が消えます。

.info:last-child {border-bottom: none;}

何故ですか？そして、最善の解決策は何ですか？

Answer 1

何を達成しようとしているのかわかりませんか？対象の子供が 1 人しかいない場合に適用しようとする:last-childと、表示されません。

複数あるとうまくいきます.info

ここを参照してください: http://jsfiddle.net/ELk4E/ - フィドルでは、div.info を 3 回レプリケートしました。3 番目と最後はborder-bottom、:last-child

ただし、ページに div.info が複数回あるが、親が異なる場合、これは機能しません。そのような：

<div class='container'> <!-- parent 1 -->
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>Last Child</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

<div class='container'><!-- parent 2 -->
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>Last Child</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

この例では、次の CSS を使用しborder-bottomて最後のコンテナのを削除できdiv.infoます。

.info {padding-bottom: 10px;  border-bottom: 1px dashed #C8C8C8;}
.container:last-of-type .info {border-bottom: none;}

基本的に、:last-child セレクターは、親の最後の子であるすべての要素に一致します。ここを参照してください: http://www.w3schools.com/cssref/sel_last-child.asp

Answer 2

これを試してみてください

.info:last-child {border-bottom: none; !important}