css3 nth 选择器

css3: nth选择器

 我们把CSS3的：nth选择器也称为CSS3 结构类

  选择方法：

：first-child()，：last-child ()  ：nth-child(n)     :nth-last-child()  :nth-of-type()  :nth-last-of-type ()   :first-of-type()  :last-of-type()  :only-child() :only-of-type() :empty()

首先我们可以理解，如果我们指定了上面的规则， html页面只要有嵌套，他就会逐级找符合条件的nth选择器 ，符合的都会执行

：first-child() 选择其父元素的首个子元素的每个Element 元素  效果如下

 

使用 div效果不一样  如下  ：

 

 

 

 

  这是为什么呢  原因是因为 相对于body来说，  第一个大div  上面的三个div 相当于 body的第一个div   但是 相对于下面的三个 div 它相对于body属于第二个div  但是第二个下面的第一个div 是属于第二个大div里面的第一个div，所以也会变颜色。

同理   ：last-child ()   指定属于其父元素的最后一个子元素的Element元素     也是这个原理， 只不过是相反的   前提是 最后一个元素就是我们要匹配的， 如果是其他元素，则不符合。

 

：nth-child(n)    选择器匹配属于其父级元素的第n和子元素 ，不论元素类型

 

 

 

 1-2 是相对于 第一个div中的第二个元素，即使第一个元素是span 也不影响计算

 2-1-2-3都是红的  是因为第二个大div 相对于body属于第二个div  故其下面都会变成红色， 如果我们只想第一个1-2变成红色， 我们可以使用

兼容性 火狐4+  ie9+

 

 

  这样是不是就很好理解了呢 

element:nth-child(number)

选择某元素下的第number个Element 元素

element:nth-child(n)

n是一个简单的表达式，取值从 0 开始计算， 这里的n只能是 n 不能用其他字母代替，用于批量选择。

全部是n   2n是元素旗下的 偶数都执行 ，   2n+1 所有元素选择都变成奇数选择器  3n   5n  等等  表示规律

同时 可以用  element:nth-child(odd)  element:nth-child(even)  表示选取奇数和偶数 第一个下标是1

 

element:nth-last-child(N)  概念 ： 匹配属于其元素的第n个子元素的每个元素，不论元素类型， 从最后一个子元素开始计数  

 兼容性 ie9+  火狐 4+   用法如上 。

element:nth-of-type(N)  概念 ： 选择器匹配属于父元素的特定类型的第N个子元素的每个元素  不同于nth-child 的区别就是 nth不指定属于特定类型的第n个子元素， 通俗点说就是，我从第一个标签开始数，我不管你标签内容是什么，无所谓什么类型的，  而 如果是nth-of-type 如果不是特定类型的，不会参与计数。 

 兼容性 ie9+  火狐 4+  

同理 ：  :nth-last-of-type (N)    概念同element:nth-of-type(N)   只不过是倒过来计数 兼容性同上。

 :first-of-type 概念 ：选择器匹配属于其父元素的特定类型的首个子元素的每个元素。 兼容性同上。

:last-of-type：概念 ：选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。 兼容性同上。

only-child  这个比较有趣 概念 ： 选择器匹配属于其父元素的唯一子元素的每个元素  通俗的讲就是 就是匹配找到这个元素在这个父元素中只有一个指定的元素，才会被选中

only-of-child  选择器匹配属于其父元素的特定类型的唯一子元素的每个元素   通俗的讲  就是指定指定的父级可以有其他元素，但是只能有一个指定的元素才会被选中 

empty ： 概念  ： 选择器匹配没有子元素（包括文本节点）的每个元素