资讯专栏INFORMATION COLUMN

nth-child和nth-of-type的区别和用法(选择器)

ccj659 / 750人阅读

摘要:样式样式变红变红变红变红变红变红伪类选择器的要求这个元素是选定的元素例如,这个后面的数字表示所有子元素中的第个伪类选择器要求这个元素是选定的元素例如在父级元素中所有子元素的第个。

样式:p:nth-child(2){color:red;}
样式:span:nth-of-type(2){color:red;}

1

2

//变红

1

//变红

2

1

2

1 2//变红
1 2//变红
1 2//变红
1 2//变红

p:nth-child(3)伪类选择器的要求1:这个元素是选定的元素(例如:p),2:这个后面的数字表示所有子元素中的第3个
span:nth-of-type(3)伪类选择器要求1:这个元素是选定的元素(例如span)2:在父级元素中所有子元素span的第3个。
推荐文章:http://www.cnblogs.com/dolphinX/p/3347713.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111309.html

相关文章

  • CSS选择整理

    摘要:在及以下,伪类选择器与兄弟选择符一起使用会有一个,查看详情。一般用于输入框设置元素被选择时的字体颜色和背景颜色注意事项在使用时需要加上各个浏览器的前缀除了是,其他浏览器都是使用。总结选择器用得好其实可以让我们少些很多代码。 很多人都觉得CSS特别简单,但其实真正写好CSS并不容易,CSS的每一点其实内容都很多,就拿选择器来说,CSS选择器大概可以分为五类: 元素选择器 关系选择器 属...

    张宪坤 评论0 收藏0
  • 细说C3选择

    摘要:今天介绍一下,选择器和选择器的优先级。选择父元素为元素的所有元素。注释不支持选择器。二选择器的优先级在中并没有给各个选择器名字,在权威指南一书中,给出了选择器的名字,如通配选择器,选择器,选择器,等等。 今天介绍一下,css选择器和选择器的优先级。 一、选择器 更加专业性的介绍,来看一下w3school中的描述,网址为:http://www.w3school.com.cn/cs...下...

    OnlyMyRailgun 评论0 收藏0
  • CSS-伪类选择(未完待续。。。)

    摘要:满足结果的为和,但是不匹配类名为,所以最后匹配结果为结果类名顺序失效匹配每一级第三个标签且标签类名为的。匹配所有父级是的元素兄弟节点选择器匹配所有紧接着元素之后的元素 子节点选择器 :nth-of-type() && :nth-child() :nth-of-type(n) 匹配父节点下同一级对应标签的第n个节点 (:nth-last-of-type(n)反序) :nth-child...

    未东兴 评论0 收藏0
  • jquery选择nth-of-type() nth-child()区别内容更新)

    摘要:它通过易于使用的在大量浏览器中运行,使得文档遍历和操作,事件处理,动画和更加简单。如果想打印输出对象的内容。他们的宽高都显示设置为一个祖先元素是隐藏的。元素被认为是可见的,因为他们仍然占据布局空间。 官网传送门: http://jquery.com/中文API文档: http://jquery.cuishifeng.cn/jQuery是一个快速,小巧,功能丰富的JavaScript库。...

    魏明 评论0 收藏0
  • jquery选择nth-of-type() nth-child()区别内容更新)

    摘要:它通过易于使用的在大量浏览器中运行,使得文档遍历和操作,事件处理,动画和更加简单。如果想打印输出对象的内容。他们的宽高都显示设置为一个祖先元素是隐藏的。元素被认为是可见的,因为他们仍然占据布局空间。 官网传送门: http://jquery.com/中文API文档: http://jquery.cuishifeng.cn/jQuery是一个快速,小巧,功能丰富的JavaScript库。...

    lowett 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<