2016-04-26 107 views
0

单独使用CSS可以选择第二个warranty-box类吗?我尝试过last-of-typelast-child的组合,但我还没有想出任何可行的方法。类型的最后一个/类的最后一个孩子?

从我可以告诉,“行”和“列”包装打破了兄弟关系last-of-typelast-child依赖。

我试过.warranty .warranty-box:last-of-type之类的组合,但我似乎只是选择其中之一或两者都没有。

我的大脑在这一点上很痛。

<section class="warranty"> 
    <div class="row"> 
     <div class="medium-centered medium-10 large-8 columns"> 
      <div class="warranty-box"> 
       <h2>All New Homes Include</h2> 
       <ul> 
        <li>7-Year Warranty*</li> 
        <li>107 Point Final Inspection</li> 
        <li>CSP (Customer Service Program)</li> 
        <li>Delivery Anywhere in Ohio**</li> 
        <li>Base Set Installation</li> 
        <li>Roll on/Beams-Guide System Set</li> 
        <li>Central Air Conditioning</li> 
        <li>Gutters and Downspouts</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="medium-centered medium-10 large-6 columns"> 
      <div class="warranty-box"> 
       <h2>Pre-Existing Homes Include</h2> 
       <ul> 
        <li>1, 2, or 3-Year Warranty on Qualified Homes*</li> 
        <li>107 Point Final Inspection</li> 
        <li>Central Air Conditioning</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</section> 
+0

最后midiate DIV孩子'第一','第n-'和'最后'伪选择是相对的到元素的父项,在本例中是'.columns' div。 – zzzzBov

回答

4

您可以按类型获取最后一个元素,然后定位该类。

DEMO https://jsfiddle.net/2362mjox/1/

.warranty > div:last-of-type .warranty-box { 
    background: red; 
} 

上面的代码将寻找的warranty

+0

谢谢!我发现很难找到任何引用,而不仅仅是最基本的例子! –

相关问题