根據它有多少孩子選擇元素？

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格是父。它有2個孩子div，都是span2。第一個span2 div只有2個子元素。但第二個span2 div有3個子元素。

我想檢測main裏面的div，它們恰好包含3個子元素。當找到這樣的元素時，應該將邊框應用於該元素。所以在我的代碼中，第二個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