一、結構（位置）偽類選擇器（ : ）
1、:first-child
2、:last-child
3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)
<body> <ul> <li>我是第一個</li> <li>我是第二個</li> <li>我是第三個</li> <li>我是第四個</li> <li>我是第五個</li> <li>我是第六個</li> <li>我是第七個</li> <li>我是第八個</li> <li>我是第九個</li> <li>我是第十個</li> </ul> </body>
<style> ul li:first-child{ /* 選擇第一個li */ background: rgb(228, 22, 22); } ul li:last-child { /* 選擇最后一個li */ background: rgb(109, 18, 212); } ul li:nth-child(6){ /* 選擇第n個li */ background: rgba(140, 214, 19); } ul li:nth-child(2n){ /* 選擇偶數li（注：n=0,1,2,3,4……） */ font-size: 20px; } ul li:nth-child(2n+1){ /* 選擇奇數li（注：n=0,1,2,3,4……） */ font-size: 12px; } </style>
二、屬性選擇器（[ ]）
1、[ 屬性 ]
2、可以和正則表達式混用，如 $ 和 ^ 和 *
<body> <ul> <li class="test">我是第一個</li> <li class="two123">我是第二個</li> <li class="twotabc">我是第三個</li> <li class="abcfour">我是第四個</li> <li class="ggg-four">我是第五個</li> <li class="bug">我是第六個</li> <li class="bug_ee">我是第七個</li> <li class="hhbug">我是第八個</li> <li class="bug345">我是第九個</li> <li class="test">我是第十個</li> </ul> </body>
<style> ul li[class=test] { /* 選擇有屬性為class=test的li（第一個和第十個） */ background: rgb(206, 25, 25); } ul li[class$=four]{ /* 選擇屬性里結尾有four的類名的li（第四個和第五個）*/ background: rgb(106, 9, 216); } ul li[class^=two]{ /* 選擇屬性里開頭有two的類名的li（第二個和第三個） */ background: rgb(54, 201, 10); } ul li[class*=bug]{ /* 選擇屬性里所有帶有bug的類名的li（第六、七、八、九個） */ font-size: 30px; } </style>
