热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css选择第几个子元素用什么选择器

在css中,想要选择指定元素中第几个子元素,可以使用“:nth-child()”选择器。“:nth-child()”选择器可以匹配属于其父元素的第N个子元素,不论元素的类型;而N可以是数字、关键词或公式。

在css中,想要选择指定元素中第几个子元素,可以使用“:nth-child()”选择器。“:nth-child()”选择器可以匹配属于其父元素的第N个子元素,不论元素的类型;而N可以是数字、关键词或公式。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css选择器指定元素中第几个子元素

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

n 可以是数字、关键词或公式。

示例:

tr td:nth-child(2){
    background-color:gray;
}

就是tr当中的td的第二个td的属性

tr:nth-child(2n+0){
    background-color:#F0F0F0;
}

这个是tr的2的倍数的

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:

p:nth-child(3n+0)
{
background:#ff0000;
}

(学习视频分享:css视频教程)

以上就是css选择第几个子元素用什么选择器的详细内容,更多请关注其它相关文章!


推荐阅读
  • 第一部分:TSqlTop有两种用法1,限制查询结果集返回的行数或总行数的百分比。当将TOP与ORDERBY子句结合使用时,结果集限制为前N个已排序行;否则,以未定义的顺序返回前N个 ... [详细]
  • ExistsQueryeditExistsQueryeditExistsQueryeditExistsQueryeditReturnsdocumentsthathaveatleas ... [详细]
  • 调用:视图调用:1@Html.DropDownListFor(tt.HrEmpGuid,ViewData[Emp] as SelectList, new {@class   ... [详细]
  • socket8 [命名管道]
    ::命名管道不但能实现同一台机器上两个进程通信,还能在网络中不同机器上的两个进程之间的通信机制。与邮槽不同,命名管道是采用基于连接并且可靠的传输方式,所以命名管道传输数据只能一对一 ... [详细]
  • docker整体了解
    Docker是一个基于LXC技术构建的容器引擎,基于Go语言开发,遵循Apache2.0协议开源Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移 ... [详细]
  • 搜索栏算是UI中很简单的一个操作了,拖一个搜索栏上来。   搜索栏中比较重要的属性是占位符,也就是图中右侧的Placeholder,比如输入“请输入关键字”,显示如下: ... [详细]
  • queue接口特点:可以模拟队列行为,即“先进先出”。接口结构queue接口继承了Collection接口,并增加了一些新方法12345678910111213141516publ ... [详细]
  • PythonDay3
    #Author:ZhaoBin#实现对Haproxy配置文件的增删改查deffetch(backend):result[]withopen('ha.conf',&# ... [详细]
  • 模仿邮件登录系统
    模仿邮件登录系统码云代码库:https:gitee.compinaomansgiteemail_login.git实验结果图:验证用户名、密码不能为空,并提示用户名或密码错误提示用 ... [详细]
  • VS2010快捷键大全原文:http:www.cnblogs.comLifeKingcnarchive201304163023603.html【窗口快捷键】Ctrl+W,W:浏览器 ... [详细]
  • 1、对于List而言,要不然就使用迭代器,要不然就从后往前删除,从前往后删除会出现角标越界。因为我List有两个remove方法,一个是int作为形参(删除指定位置的元素),一个是 ... [详细]
  • Givens1,s2,s3,findwhethers3isformedbytheinterleavingofs1ands2.Forexample,Given:s1aabcc ... [详细]
  • dremio的学习点滴
    在连接数据源后,进行数据源反射的创建,dremio会在本地创建一个类似于副本的文件,具体目录未知,当下次去执行sql时,则会启动加速器进行查询速度的优化。反射策略:fullupda ... [详细]
  • Postman工具使用教程
    Postman的基础功能1.GET请求GET请求:点击Params,输入参数及value,可输入多个,即时显示在URL链接上,所以,GET请求的请求头与请求参数如在接口文档中无特别 ... [详细]
  • salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面
    上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息。当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:PopUpWindo ... [详细]
author-avatar
mobiledu2502857923
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有