选择器——:nth-child

最新推荐文章于 2024-08-20 16:49:19 发布
最新推荐文章于 2024-08-20 16:49:19 发布
阅读量318 收藏
点赞数
分类专栏： css3 选择器 文章标签： css3 nth-child 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31105447/article/details/52185919
版权

这次我们测试选择器——:nth-child

理论：

:nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式。

测试代码块

以body为直接父级的p元素


第一个p元素
 
   
   

以div为直接父级


   
   

    
    
    
第一个p元素

    
    
    
第一个p元素
   
    
    

   
   


以div为直接父级


   
   

    
    
    
    
    
    
第一个p元素

    
    
    
第二个p元素
   
    
    
    
    
    
第三个p元素
效果图：

Jener
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css选择器:nth-child()的用法
丹
10-10 3958
:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 偶数标签:nth-child(2n) 奇数标签 :nth-child(2n-1) 选择从第6个开始的，直到最后:nth-child(n+6) 选择第1个到第6个 :nth-child(-n+6) 两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-child() 选择器 :nth-last-chil
html nthchild作用,详解CSS中:nth-child的用法
weixin_31129821的博客
06-18 4587
前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：Tips：还用低版本的IE浏览器的哥们请绕过！:nth-child(2)选取第几个标签，“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:n...
nth-child的使用
胡世林的博客
05-02 1315
觉得这篇博客可能会帮到其他朋友 之前在学习css3的使用，接触到了nth-child（）这一选择器，发现怎么也用不好，今天有空了，就去试了下，（只举一个例子） 直接说吧， 后代选择器： 例子：.parent div:nth-child(1) 解说：--使用这个子类选择器的时候，需要注意，这是两个验证条件，是没有关系的必须满足第n个子元素是div的时候才可以触发，不是满足在他的子类
CSS选择器
li_chun_can的博客
08-05 162
标签选择器 ​作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。 格式: 标签名称{ 属性:值; } 【注】： 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签。 2.标签选择器无论标签藏得多深都能选中。 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)。 id选择器 作用: 根据指定的id名称找到对应的标签, 然后设置属性 格式： ​ #id名称{ ​
微信小程序——:nth-child等在小程序中使用
我是我
05-27 4055
Vue中，父组件列表引入每一个子组件元素的时候，可以在父组件的CSS文件中设置子组件的margin，可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等，那么在小程序中是如何实现的呢？ 父组件： WXML <view class="getnotice-list"> <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"
子选择器：first-child和nth-last-child ——能不用js就用css
QUX轻博客
07-03 289
之前一直纠结一个问题：腾讯qq和微信发布图片的时候，1个图片时大图，2个图片并列排，3个图片单行并列并缩写...9个图片9宫格，这不用js肯定实现不了！ 但是，但...
CSS伪类选择器 ——:last-child、:nth-last-child(n)、:nth-last-of-type(n)
洛丹伦的夏天
11-28 6260
在系统的学习前端知识前，一直是JQuery的忠实用户，很大程度上是由于它能够很方便的获取Element对象，通过它强大的选择器 —— 《JQuery选择器》，让我们成功远离原生JS获取Element对象的苦恼和鸡肋： document.getElementsByClassName() document.getElementById() document.getElementsByName() d...
CSS：nth-child和nth-of-type的深入理解
lakenQi
11-02 1967
啰嗦一句 这两个选择器，可不是看起来那么简单的使用，如果没有彻底理解，蒙圈那是必须的——-如下代码： &lt;style&gt; div .div:nth-of-type(1) { background: #ff0000; } &lt;/style&gt; &lt;body&gt; &lt;div&gt; &lt;h1&gt;第一个h1标题&lt;/h1&gt; &lt;div&
关于:nth-child(n)伪类的一些理解
opt1997的博客
09-26 1451
要想知道nth-child(n)到底作用到了哪些标签上，我们就不得不从选择器开始说起。 选择器 当我们使用了选择器，到底选中的是什么? 结论：不论选择器多复杂，最终选择到的都是标签 举一个例子：html的代码如下： 首先来看个简单的CSS代码： body {} 十分明显，我们这里选择的是body标签。如果再加一点： body ul{} 显而易见，我们这里选择的是body里所有的ul。也就是说...
选择器（css3/css2）
04-03
本篇文章将深入探讨 CSS3 选择器中的重要成员——`:nth` 选择器系列，并通过实例演示这些选择器的用法与应用场景。 #### 二、`:nth` 选择器概述 `:nth` 选择器是 CSS3 引入的一组强大而灵活的选择器，它们允许...
使用HTML开发商业网站-结构化伪类选择器课件.pptx
07-10
`:nth-child(n)` 和 `:nth-last-child(n)` 选择器允许根据子元素的位置来选择元素，这里的 `n` 可以是一个具体的数字或公式表达式。这两个选择器分别是 `:first-child` 和 `:last-child` 的扩展，使得可以更灵活地...
CSS伪类/伪元素选择器整理
12-13
一、超链接  a：link{ color:red;}  a：visited{ color:blue;}  a：hover{ color:black;}  a：active{ color:#6600CC;... ：nth-child(n) ——————— 作为其父元素的第n个孩子的一个元素   ：n
让IE可以变相支持CSS3选择器
09-25
例如，`div:nth-child(2)`将被转换为`div._iecss-nth-child-2`。接着，DOMAssistant工具用于查找匹配的DOM节点并添加相应的CSS类，从而使元素获得正确的样式。然而，ie-css3.js有一些限制，如样式表必须通过`<link>`...
CSS选择器和jQuery选择器
01-31
本文将深入探讨两种常用的选择器——CSS选择器和jQuery选择器，并通过具体的例子来帮助读者更好地理解和掌握它们。 #### 二、CSS选择器 CSS选择器是CSS的核心功能之一，用于定义哪些HTML元素应该应用特定的样式。...
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 509
【代码】原神4.8版本抽到角色和重点培养数据表。
大学生创业计划书(30)-两份资料.doc
08-20
大学生创业计划书(30)-两份资料.doc
学习DXP编辑多个对像
08-20
DXP编辑多个对像
基于Matlab编程的直线检测实现[Matlab编程].zip
最新发布
08-20
MATLAB提供了多种直线检测技术，其中包括以下几种常用的方法： 1. Hough变换：Hough变换是一种基于极坐标空间的直线检测方法，通过将直线表示为参数空间中的点，将图像中的直线检测问题转化为参数空间中的点集聚类问题。MATLAB中的函数'hough'和'houghlines'可以实现Hough变换直线检测。 2. 边缘检测+RANSAC：先使用边缘检测方法（如Sobel、Canny等）提取图像中的边缘，然后使用RANSAC算法拟合直线模型。MATLAB中的函数'edge'可以进行边缘检测，而函数'fitline'可以使用RANSAC算法进行直线拟合。 3. 直线分段检测：将图像中的直线分段，在每个段上进行直线拟合。常见的方法包括分段最小二乘法、分段Hough变换等。MATLAB中的函数'fitline'可以对图像中的曲线进行分段直线拟合。 4. 基于模型的直线检测：根据直线的几何模型进行直线检测，常见的方法包括RANSAC算法、最小二乘法等。MATLAB中的函数'fitline'可以实现基于模型的直线检测。 以上是一些常用的MATLAB直线检测技术，具体的选择要根据实
jquery选择器:nth-child()
07-16
jQuery选择器中的`:nth-child()`伪类可以用来选择某个父元素下的特定子元素。它基于子元素在父元素中的位置进行选择。以下是几个示例： 选择第n个子元素： ```javascript $(document).ready(function(){ // 选择第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值