CSS-伪类选择器(未完待续。。。)

栏目: CSS · 发布时间: 5年前

内容简介:结果: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) 无效

CSS-伪类选择器(未完待续。。。)

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>

CSS-伪类选择器(未完待续。。。)

<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的。

CSS-伪类选择器(未完待续。。。)

div>p

匹配所有父级是<div>的<p>元素

兄弟节点选择器

div+p

匹配所有紧接着<div>元素之后的<p>元素


以上所述就是小编给大家介绍的《CSS-伪类选择器(未完待续。。。)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品设计思维

产品设计思维

王丁 / 机械工业出版社 / 2017-8-1 / 79

这是一本关于“产品设计思维与方法”方面的实战书籍。融合了笔者多年行为实践经验,以大量的图例和案例详细展现产品设计背后的真实思维与构建方法,全面系统地分析电子商务产品设计方案,从规划、架构、逻辑、原型等多个方面对电商平台的产品设计过程进行细致分享。 在互联网产品设计领域,设计理念与设计方法却是能持续复用的,只要你掌握了一套行之有效的互联网产品设计方法论与工具,那无论是从事什么样的行业,你都能快......一起来看看 《产品设计思维》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具