知道科技

全部频道

您的当前位置：首页css3巧用结构性伪类选择器

css3巧用结构性伪类选择器

来源：知道科技
 最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来：

这是最基本的样式：

 1

body内的内容：

 1 
 2 
 3 
  • 第01个
    • 
 4 
  • 第02个
    • 
 5 
  • 第03个
    • 
 6 
  • 第04个
    • 
 7 
  • 第05个
    • 
 8 
  • 第06个
    • 
 9 
  • 第07个
    • 
10 
  • 第08个
    • 
11 
  • 第09个
    • 
12 
  • 第10个
    • 
13 
  • 第11个
    • 
14 
15

    首先是最基本的结构性伪类选择器的用法：

    1 li:nth-child(8){
2 background-color: #298EB2;
4 }

    结果展示为：

    利用:nth-child(n+6) 相当于:nth-child(6)及以上的li标签元素：

    1 li:nth-child(n+6){
2 background-color: #298EB2;
4 }

    结果展示为：

    同理利用:nth-child(-n+6) 相当于:nth-child(6)及以下的li标签元素：

    1 li:nth-child(-n+6){
2 background-color: #298EB2;
4 }

    结果展示为：

    根据以上原理我们可以来一些进阶的：

    比如可以利用 nth-child(n+4):nth-child(-n+8) 达到获取:nth-child(4)及以上和:nth-child(8)及以下的li标签元素：

    1 li:nth-child(n+4):nth-child(-n+8){
2 background-color: #298EB2;
3 }

    结果展示为：

    还可以利用 :nth-child(n+2):nth-child(odd):nth-child(-n+8) 获取:nth-child(n+2)到:nth-child(-n+8)之间的单数li标签元素：

    1 li:nth-child(n+2):nth-child(odd):nth-child(-n+8){
2 background-color: #298EB2;
3 }

    结果展示为：

    最后我们还可以利用:nth-child(3n+1)获取数目为1、4、7、10中的偶数li标签元素：

    1 li:nth-child(3n+1):nth-child(even){
2 background-color: #298EB2;
3 }

    结果展示为：
    显示全文