CSS基础之其他的选择器

其他的选择器

1. :first-child

   选择第一个子元素,

   li:first-child 表示选中li中的第一个li, 且被选中的该li元素必须是其父元素下的第一个子元素

       <!-- 这种情况下first-child是不能选中li的.
       因为li不是ul下的第一个子元素,如果去掉p元素就可以
       使用first-child选中
        -->
       <ul>
       <p>lorem1</p>
       <li></li>
       <li></li>
   	</ul>
   

2. :first-of-type

   选中子元素中第一个指定类型的元素

   li:first-of-type 表示选中子元素中第一个li元素,不一定是第一个子元素

   <!-- 这种情况下first-of-type是能选中li的.
        -->
     <ul>
       <p>lorem1</p>
       <li></li>
       <li></li>
   </ul>
   

3. last-child
   必须是某一个元素并且是最后一个元素

4. nth-child
   选中指定的第几个子元素

   li:nth-child(4) 必须是li元素且必须是第五个子元素(不一定是a元素中的第五个)
   li:nth-child(2n) 必须是li元素且必须是第偶数个
   even: 关键字=2n
   odd: 关键字=2n+1

5. nth-of-type
   选中指定的子元素中第几个某类型的元素

6. first-letter
   选中元素中的第一个字母(文字)

7. first-line
   选中元素中的第一行的文字

8. selection
   选中被用户框选的文字