CSS - 针对特定非独生子女decendents

Question

我有以下的标记：

<footer> 
    <div> 
     <ul> 
      <li>content</li> 
      <li><a target="_blank" href="#">Link</a></li> 
      <li><a target="_blank" href="#">Link</a></li> 
      <li><a target="_blank" href="#">Link</a></li> 
     </ul> 
    </div> 
    <div> 
     <ul> 
      <li>Content</li> 
      <li>Content</li> 
      <li>Content</li> 
      <li>Content</li> 
     </ul> 
    </div> 
</footer> 

我怎么能只针对第二<ul>与不应用自定义ID和班级我的HTML CSS？

Answer 1

footer > div:last-child > ul { /*styles*/ } 

Answer 2

试试这个：

footer div:nth-child(2) ul { 
 
    background-color: green; /* For success */ 
 
}

<footer> 
 
    <div> 
 
     <ul> 
 
      <li>content</li> 
 
      <li><a target="_blank" href="#">Link</a></li> 
 
      <li><a target="_blank" href="#">Link</a></li> 
 
      <li><a target="_blank" href="#">Link</a></li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <ul> 
 
      <li>Content</li> 
 
      <li>Content</li> 
 
      <li>Content</li> 
 
      <li>Content</li> 
 
     </ul> 
 
    </div> 
 
</footer>

这就是说，只要有可能我会鼓励类/ ID的路线，因为虽然它可能是肮脏的，它也可以让你重新排列项目。稍后再回到网站时，它也可以稍微更容易排除故障，因为从标记中可以清楚地知道它们的样式。

Answer 3

在这种特殊情况下footer div:nth-of-type(2) ul或footer div:last-of-type ul

http://codepen.io/anon/pen/ZBoONm

Answer 4

完成可能的解决方案集合：

footer div:nth-of-type(2) ul { 
    color: red; 
} 

小提琴：https://jsfiddle.net/9uuqub2k