css3=css2+新语法+新的属性,就是对css2进行扩充/删减/优化.
结构伪类
| 选择器 | 功能 |
|---|---|
| E:first-child | 匹配第一个孩子 |
| E:last-child | 匹配最后一个孩子 |
| E:nth-child(n) | 匹配第n个孩子 |
| E:nth-child(2n)或E:nth-child(even) | 匹配偶数的孩子,如:2,4,6,8... |
| E:nth-child(2n+1)或E:nth-child(odd) | 匹配奇数的孩子,如:1,3,5,7,9... |
| E:only-child | 匹配有且只有一个孩子 |
代码结构div.box>ul>li{css快速掌握$}*3
<div class="box"> <ul> <li>css快速掌握1</li> <li>css快速掌握2</li> <li>css快速掌握3</li> </ul> <ul> <li> 如何匹配有且只有一个孩子 </li> </ul> </div>
样式结构
<style type="text/css">
div ul li:only-child{
color: #f00;
}
</style>