内容简介:结果:p:nth-child(2) 无效p:nth-of-type(2): 匹配父节点下的第二个是p的子节点
子节点选择器
:nth-of-type() && :nth-child()
- :nth-of-type(n) 匹配父节点下同一级对应标签的第n个节点 (:nth-last-of-type(n)反序)
- :nth-child(n) 匹配父节点下同一级第n个子节点且子节点为对应标签(:nth-last-child(n)反序)
- 值得注意的是::nth-如添加了类名限制,查找时子节点的顺序n不受类名限制影响,但查找到的结果受类名限制。
:nth-of-type() && :nth-child()区别
<div> <p>第1-1个p元素</p> <section> <p>第2-1个p元素</p> <section>第2-1个section元素</section> <p>第2-2个p元素</p> <p>第2-3个p元素</p> </section> <section>第1-2个section元素</section> <section>第1-3个section元素</section> <section>第1-4个section元素</section> <p>第1-2个p元素</p> <p>第1-3个p元素</p> </div>
section > p, section > section { padding-left: 30px; } p:nth-of-type(2){ color: red; } p:nth-child(2){ background: red; } p.info:nth-of-type(2){ }
结果:p:nth-child(2) 无效
p:nth-of-type(2): 匹配父节点下的第二个是p的子节点
p:nth-child(2): 匹配父节点下第二个子节点同时第二个子节点为p
注意点
<div> <p>1</p> <div class="foo"> <div class="foo">2-1</div> <div class="foo">2-2</div> </div> <p>3</p> <p class="foo">4</p> <p class="foo">5</p> </div>
.foo:nth-of-type(2) { color: red; }
效果:类名顺序失效, 匹配每一级同一个类型的第二个标签且类名为foo的。
满足:nth-of-type(2)结果的为<div class="foo">2-2</div>和<p>3</p>,但是<p>3</p>不匹配类名为foo,所以最后匹配结果为<div class="foo">2-2</div>
<div> <p>1</p> <div class="foo"> <div class="foo">2-1</div> <div class="foo">2-2</div> <div class="foo">2-3</div> </div> <p>3</p> <p class="foo">4</p> <p class="foo">5</p> </div>
p.foo:nth-of-type(3) { color: red; }
结果:类名顺序失效, 匹配每一级第三个p标签且p标签类名为foo的。
div>p
匹配所有父级是<div>的<p>元素
兄弟节点选择器
div+p
匹配所有紧接着<div>元素之后的<p>元素
以上所述就是小编给大家介绍的《CSS-伪类选择器(未完待续。。。)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- golang[70]-未完待续....
- mysql-事务管理(进阶)--待续
- 两小时openstack环境搭建(keystone)...未完待续……
- 你不知道的JavaScript上卷-读书笔记 - 未完待续...不用点开了~
- 选择/取消选择所有按钮以选择闪亮变量
- 个人如何成长?兴趣驱动,选择与被选择的思考
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。