Question

我有这样的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/

main div是父母。它有2个子div，都是span2类。第一个span2 div只有2个子元素。但是第二个span2 div有3个子元素。

我想检测main中包含3个子元素的div。找到这样的元素后，应该对该元素应用边框。所以在我的代码中，第二个span2元素应该在它周围有一个边框。

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

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

来源： Can CSS detect the number of children an element has?

有人可以帮我这个吗？

Answer 1

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

#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;
}

Fiddle

根据它有多少孩子来选择元素？

1 个答案: