CSS疑似クラス最後の子問題

Question

私が持っているウェブサイト http://yournextleap.com/fresher-jobs は、下の境界 破線た.inn HTML

<div data-recommendation="" data-id="3790" data-guidance="" data-bucket="jobs"> 
<div class="inn"> 
/* Some code*/ 
</div> 
</div> 

に持つ最後のdivを見つけるしてください、それが動的に

を生成された親のdiv何I欲しい：

1. 最後のDIV .innはb注文：なし;そのため
2. 私が試した：最後の子
3. を私はJSやjQueryの

を使用したくない私は（一時的に、私はそれを削除）、メインのdivのクラスを追加しました。今THERが、それはそれだ

<div class="main"> 

ただけ<div> あり、ここに私のCSSは

.main:last-child .inn{ 
border: none;} 

だった。しかし、それはちょっと私がテストして、あなたのCSSに以下の変更を行った

Answer 1

を働いていない

div.hero-unit div.recommendation + div div:last-child div.inn {border:none !important;} 

FirefoxとChromeで動作します。私はIEのための同じをテストしていますこれはIE 9 +ブラウザでのみ動作しますIE 7とIE 8はこのCSSセレクタをサポートしません。

ここでパターンを説明します。

1. div.hero-unit
   は
2. div.recommendationはdivの内側の最後の子を選択しますすぐに次のdiv
3. div:last-childを選択しますdiv.hero-unit
4. + div内部の子を選択することで、親のdivに私たちが持っているものを選択することですポイント3で選択
5. div.innborder:noneを!importantに設定して、他の罫線は適用されませんd !importantのため、border:noneに最高の優先度が与えられます。

は、それがすべての読みにお役に立てば幸いです。..運

Answer 2

のベストここで私はあなたが持っていたと仮定しているものです：

<div class="main"> 
     <div data-recommendation="" data-id="3790" data-guidance="" data-bucket="jobs"> 
      <div class="inn"> 
      /* Some code*/ 
      </div> 
     </div> 
    </div> 

そのような場合、あなたが必要とする：

.main div:last_child .inn { 
     border:none; 
    } 

を