css3中nth-child()的用法示例代码

nth-child(n)是css3中的一种选择器,它的作用是匹配属于其父元素的第n个元素,不论元素的类型。重点是“不论元素的类型这句话”

nth-child(n)是css3中的一种选择器,它的作用是匹配属于其父元素的第n个元素,不论元素的类型。重点是“不论元素的类型这句话”,好多人容易误解这句话。

现在提出一个需求,如下图所示,将第二行和第三行的字体颜色改为红色和蓝色

<div class="father1">
    <p>1234</p>
    <p>12345</p>
    <p>12345</p>
</div>

css代码实现:很容易实现,利用p:nth-child(2)和p:nth-child(3)分别选中第2和第3个元素不就可以了吗?

.father1 {
  width:300px;
  height:300px;
  background-color: aqua;
  p:nth-child(2) {
      color:red;
  }
  p:nth-child(3) {
      color:blue;
  }
}

看效果图:

我现在又提出了一个新的需求:还是把将第二行和第三行的字体颜色改为红色和蓝色,要求使用nth-child(n)选择器实现

<div class="father1">
    <img src="./2.jpg" alt="">
    <p>12345</p>
    <span>12345</span>
</div>

那么有的人会这样去写css代码:

.father1 {
  width:300px;
  height:300px;
  background-color: aqua;
  p:nth-child(1) {
      color:red;
  }
  span:nth-child(1) {
      color:blue;
  }
}

来看效果图:

怎么没有生效呢?咱们代码写的也没有问题啊,p:nth-child(1):p标签中排列的第一个元素,span:nth-child(1):span标签中排列的第一个元素嘛?没有问题啊,怎么回事呀?

要注意:不论其元素类型。nth-child(n)指的是在父元素中所有的元素的顺序,上述html代码中,div是父元素,img,p和span标签都是div的子元素,p排在第2个,span排在第3个,这才是对n的正确理解。

咱么试一试,改动一下css代码:

.father1 {
    width:300px;
    height:300px;
    background-color: aqua;
    p:nth-child(2) {
        color:red;
    }
    span:nth-child(3) {
        color:blue;
    }
}

效果图:

到此这篇关于css3中nth-child()的用法的文章就介绍到这了,更多相关css3 nth-child()用法内容请搜索好代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持好代码网!

您可能有感兴趣的文章
div设置可编辑内容的方法

CSS如何实现不换行/自动换行/超出隐藏显示省略号的方法

CSS如何实现图片变暗的方法

CSS如何实现图片垂直翻转的效果

CSS如何实现修改表格偶数或奇数行的颜色