雙最後孩子電話，一個工作，另一個不

Question

我有我的代碼在這裏：http://jsfiddle.net/u9BsD/2/

你會看到#indoorRange被應用推最後框右邊的最後一個孩子第二部分並將寬度增加1％。第一部分#membership是完全一樣的，但有三個方框，但最後一個孩子班級沒有影響它應該的元素。圍繞我不知道的最後孩子規則有一些規則嗎？

謝謝你的幫助。

<div id="memberships"> 
<div class="greyHeading"> 
    <header> 
     <h3>Individual Membership:</h3> 

    </header> 
    <p>$175.00</p> 
</div> 
<div class="greyHeading"> 
    <header> 
     <h3>Family Membership:</h3> 

    </header> 
    <p>$200.00 (Includes spouse and children under 21)</p> 
</div> 
<div class="greyHeading"> 
    <header> 
     <h3>Red, White and Blue Discounts:</h3> 

    </header> 
    <p>Active LE, military, and 1st responders: 1/2 price membership discount!</p> 
    <p>Retired LE, military and 1st responders 25% discount on membership!</p> 
</div> 
<div class="cl"></div> 
</div> 
<div id="indoorRange"> 
<div class="greyHeading"> 
    <header> 
     <h3>Range Fees</h3> 

    </header> 
    <p>The range fees are per session. A "session" is defined as a visit to Allen 
     Arms Indoor Shooting Range. We reserve the right to limit sessions to one 
     hour if other customers are waiting for lanes.</p> 
    <p>All lanes limited to two shooters unless special permission is obtained 
     in advance.</p> 
</div> 
<div class="greyHeading"> 
    <header> 
     <h3>Single Session</h3> 

    </header> 
    <ul> 
     <li>One Adult Shooter: $10.00</li> 
     <li>Two Adult Shooters on Same Lane: $7.50 Each</li> 
     <li>Children under 18 with paying adult guardian: Free</li> 
    </ul> 
</div> 
<div class="greyHeading"> 
    <header> 
     <h3>Ladies Day</h3> 

    </header> 
    <p>Every Wednesday is Ladies Day! Women shoot for $5.00. Additionally, women 
     receive 20% off range memberships.</p> 
</div> 
<div class="greyHeading"> 
    <header> 
     <h3>Red White and Blue Discounts</h3> 

    </header> 
    <p>Law Enforcement, Active Duty Military, First Responders, and Security 
     personnel pay only $5.00 per session any time, and receive 50% discount 
     on memberships!</p> 
</div> 
</div> 


#memberships .greyHeading { 
float: left; 
width: 32%; 
margin: 0 1% 0 0; 
} 
#memberships .greyHeading:last-child { 
float: right; 
margin: 0; 
width: 33%; 
} 
#memberships .greyHeading header { 
background: #666; 
margin: 0 0 10px 0; 
} 
#memberships .greyHeading header h3 { 
color: #fff; 
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
line-height: 25px; 
margin: 0; 
padding: 5px 0 1px 5px; 
} 
#indoorRange .greyHeading { 
float: left; 
width: 24%; 
margin: 0 1% 0 0; 
} 
#indoorRange .greyHeading:last-child { 
float: right; 
margin: 0; 
width: 25%; 
} 
#indoorRange .greyHeading header { 
background: #666; 
margin: 0 0 10px 0; 
height: 55px; 
} 
#indoorRange .greyHeading header h3 { 
color: #fff; 
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
line-height: 25px; 
margin: 0; 
padding: 5px 0 1px 5px; 
} 

Answer 1

從HTML刪除<div class="cl"></div>並添加#indoorRange { clear: both; }到CSS，我相信這可以修復它。

由於<div class="cl">元素不是最後一個子元素，所以樣式不適用於最後一個成員灰色標題。

編輯：fiddle for proof

EDIT2：我是對的有應用該樣式的CL格，您可以使用last-of-type僞選擇達到你想要什麼還，我不知道是什麼瀏覽器支持是不幸的。

有關更多信息，請參見本SO問題：

CSS last-child selector: select last-element of specific class, not last child inside of parent?

Answer 2

這不是最理想的答案，因爲它不能解決原因：最後一個孩子不工作。然而，這對我來說確實有效，並且可能是一個合適的解決方案。

我所做的只是從使用最後一個孩子轉換到第n個孩子。所以這兩個特定類的變化......我還添加了背景顏色，使其在視覺上更加明顯，他們在這裏的工作的jsfiddle：http://jsfiddle.net/u9BsD/3/

#memberships .greyHeading:nth-child(3) { 
    float: right; 
    margin: 0; 
    width: 33%; 
    background: red; 
} 

#indoorRange .greyHeading:nth-child(4) { 
    float: right; 
    margin: 0; 
    width: 25%; 
    background: blue; 
}