css3 nth 选择器

梦想的初衷 提交于 2019-11-30 06:07:41

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 : 概念  : 选择器匹配没有子元素(包括文本节点)的每个元素

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!