本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

css3中nth-child()的用法介绍

css 来源：互联网 作者：佚名 发布时间：2024-01-23 23:30:28 人浏览
摘要

nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是不论元素的类型这句话，好多人容易误解这句话。 现在提出一个需求，如下图所

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

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

1

2

3

4

5

<div class="father1">

    <p>1234</p>

    <p>12345</p>

    <p>12345</p>

</div>

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

1

2

3

4

5

6

7

8

9

10

11

.father1 {

  width:300px;

  height:300px;

  background-color: aqua;

  p:nth-child(2) {

      color:red;

  }

  p:nth-child(3) {

      color:blue;

  }

}

看效果图：

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

1

2

3

4

5

<div class="father1">

    <img src="./2.jpg" alt="">

    <p>12345</p>

    <span>12345</span>

</div>

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

1

2

3

4

5

6

7

8

9

10

11

.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代码：

1

2

3

4

5

6

7

8

9

10

11

.father1 {

    width:300px;

    height:300px;

    background-color: aqua;

    p:nth-child(2) {

        color:red;

    }

    span:nth-child(3) {

        color:blue;

    }

}

效果图：
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • CSS3调整背景图片大小的代码介绍

    CSS3调整背景图片大小的代码介绍
    在CSS3中，如果想要调整背景图片的大小可以通过设置background-size属性进行设置。 一、background-size 语法格式 1 background-size: length|percentage|co

  • css3中nth-child()的用法介绍

    css3中nth-child()的用法介绍
    nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是不论元素的类型这句话，好多人容

  • CSS实现风吹动树叶的动画效果的代码

    CSS实现风吹动树叶的动画效果的代码
    如题，要实现树叶在风中摇摆的动画，首先准备主体：树叶。 这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。 首先我们使用img标

  • CSS中的linear-gradient参数学习与使用教程介绍

    CSS中的linear-gradient参数学习与使用教程介绍
    定义与方法 inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同
  • 纯css实现自动+手动图片轮播效果的代码
    1.图片自动轮播 创建2个盒子，一个盒子进行轮播图展示，一个盒子用来承载图片 1 2 3 4 5 6 7 8 9 10 11 12 13 body !-- 创建外部展示容器 -- div cla

  • CSS实现轮播图效果(自动切换、无缝衔接、小圆点

    CSS实现轮播图效果(自动切换、无缝衔接、小圆点
    1、基础 html 代码 使用ul-li放入多张需要轮播的图片 使用input标签指定type=radio创建小圆点按钮，并设置单独的 id 属性 使用label的 for 属性指定
  • CSS中常见选择器的介绍与使用
    CSS选择器是CSS的基石，赋予开发者精确控制HTML文档中元素样式的能力。选择器定义了CSS规则集将应用到HTML文档的哪一部分，通过不同类型的
  • css3实现动画无限循环介绍
    要在CSS3中实现动画的无限循环，你可以使用animation属性和infinite关键字。以下是一个示例： 1 2 3 4 5 6 7 8 @keyframes myAnimation { 0% { /* 起始状态

  • 使用纯CSS实现网页阅读进度条的代码

    使用纯CSS实现网页阅读进度条的代码
    为了构建一个阅读进度条，即显示用户向下滚动时阅读文章的进度，很难不考虑 JavaScript。但是，事实证明，您也可以使用纯 CSS 构建阅读进

  • 用CSS实现弧形卡片的三种方式介绍

    用CSS实现弧形卡片的三种方式介绍
    在平时开发中，有时候会碰到下面这种弧形样式，主要分为内凹和外凸两种类型，如下 该如何实现呢？或者想一下，有哪些 CSS 属性和弧形
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计