0

我有一个这样的 HTML 代码：

<div class="main"></div>
<div class="span2">
    <div><a href="xyz71">List 1</a></div>
    <div>
        <ul>
            <li><a href="xyz71_72">Cat 11</a>
            </li>
            <li><a href="xyz71_73">Cat 12</a>
            </li>
            <li><a href="xyz71_76">Cat 13</a>
            </li>
            <li><a href="xyz71_78">Cat 14</a>
            </li>
        </ul>
    </div>
</div>
<div class="span2">
    <div><a href="xyz90">List 2</a></div>
    <div>
        <ul>
            <li><a href="xyz90_91">Cat 211</a>
            </li>
            <li><a href="xyz90_92">Cat 212</a>
            </li>
            <li><a href="xyz90_93">Cat 213</a>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="xyz90_91">Cat 221</a>
            </li>
            <li><a href="xyz90_92">Cat 222</a>
            </li>
            <li><a href="xyz90_93">Cat 223</a>
            </li>
            <li><a href="xyz90_94">Cat 224</a>
            </li>
            <li><a href="xyz90_95">Cat 225</a>
            </li>
            <li><a href="xyz90_96">Cat 226</a>
            </li>
        </ul>
    </div>
</div>

JSFiddle：http: //jsfiddle.net/LUJmd/1/

maindiv 是父级。它有 2 个子 div，都是 class span2。第一个span2div 只有 2 个子元素。但是第二个span2div 有 3 个子元素。

我想检测main其中包含恰好 3 个子元素的 div。当找到这样的元素时，应该为该元素应用边框。所以在我的代码中，第二个span2元素应该有一个边框。

我为此目的找到了以下代码，但我在这里找不到使用它的方法。

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

来源： CSS 可以检测元素的子元素数量吗？

有人可以帮我弄这个吗 ？

4

1 回答 1

1

它并不完美，但如果您能够position: relative;在容器 div 上设置 a，您可以使用伪元素来执行此操作。

#container > div {
    position: relative;
}
#container > div div:nth-child(3):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #000;
    z-index: -1;
}

小提琴

于 2013-09-22T16:48:10.330 回答