Question

是否可以仅使用CSS选择第二个warranty-box类？我尝试过last-of-type和last-child的组合，但我还没有想出任何可行的方法。

据我所知，＆＃34; row＆＃34;和＆＃34;列＆＃34;包装器打破了兄弟风格关系last-of-type和last-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>

Answer 1

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

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

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

上面的代码将查找warranty

的最后一个中间div子项

最后的类型/最后一个孩子与类？

1 个答案: