color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
这个样式会设置一个背景，删除浏览器默认的ul的padding值，并定义边框给每一个li来提供一点深度。
如上图所示，唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child和:last-child来解决这个问题。
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
看上图，解决了不是。
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
•Opera
是滴，IE8支持 first-child 不过不支持last-child。
28. X:only-child
div p:only-child {
color: red;
}
实话说，你很可能会发现你不会经常使用 only-child伪类。尽管如此，它确实有用，你应该需要它。
它可以帮助你选择是父节点的独生子（没别的孩子啦）的元素。例如，使用上面的代码，只有是div的唯一子孩子的p段落才会定义其颜色为red。
让我们来假定下面的标记。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
这样，第二个div的p标签的内容不会被选中。只有第一个div的p才会被选中。
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
•Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
这种结构的伪类有几种灰常聪明的用法。它可以选定在其父节点内没有兄弟节点的元素。例如，我们可以选择只有一个li作为其子孩子的ul。
首先，取决于你想怎样完成这一目标。你可以使用 ul li，不过，这回选择所有li元素。唯一的办法是使用only-of-type。
ul > li:only-of-type {
font-weight: bold;
}
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
30. X:first-of-type
first-of-type 伪类可以让你选择该类型的第一个兄弟节点。
一个测试
为了更好地理解它，让我们来测试一下啊。拷贝下面的标记到你的编辑器。
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
