文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS -子选择器-第n个-子(1)-交错-只选择第一个元素一次

CSS -子选择器-第n个-子(1)-交错-只选择第一个元素一次

CSS（层叠样式表）是一种用于描述网页样式的标记语言。它可以控制网页的布局、字体、颜色、背景等方面的样式。在CSS中，子选择器是一种选择器，用于选择指定元素的直接子元素。

第n个子选择器（:nth-child）是一种CSS伪类选择器，用于选择指定元素的第n个子元素。它可以通过指定一个公式来选择元素，例如:nth-child(2n)表示选择偶数位置的子元素，:nth-child(3n+1)表示选择位置为3的倍数加1的子元素。

交错选择器（:nth-of-type）是一种CSS伪类选择器，用于选择指定元素类型的第n个元素。它与第n个子选择器类似，但只考虑指定元素类型的元素。

只选择第一个元素一次（:first-of-type）是一种CSS伪类选择器，用于选择指定元素类型的第一个元素。

这些选择器在前端开发中经常用于选择特定位置或类型的元素，以实现样式的精确控制。

以下是一些相关的腾讯云产品和产品介绍链接地址：

  1. 腾讯云CSS CDN：腾讯云的内容分发网络（CDN）服务，用于加速网站的静态资源访问速度。了解更多信息，请访问：https://cloud.tencent.com/product/cdn
  2. 腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，用于部署和运行各种应用程序。了解更多信息，请访问：https://cloud.tencent.com/product/cvm
  3. 腾讯云数据库（TencentDB）：腾讯云提供的多种类型的数据库服务，包括关系型数据库、NoSQL数据库等。了解更多信息，请访问：https://cloud.tencent.com/product/cdb

请注意，以上链接仅供参考，具体的产品选择应根据实际需求进行评估和决策。

相关搜索:CSS选择父级的第n个直接子元素CSS在第n个元素后断开子元素第n-子元素的第一个和最后一个都应用于元素考虑到文本节点，第一个子元素有CSS选择器吗？如何才能按类只选择容器的第一个子元素？如何使用Jquery和类选择器获取元素的第一个子文本？sql文件执行上海备案app审核域名不存在svn服务端口
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

jquery获取第几个子元素_js获取元素的指定子元素

元素；对 于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果n取0，...； :eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了； :gt...(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)； :lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul...:lt(2)返回从第0个和第1个ul元素； 2....利用css选择器进行选择： 元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择

27.2K30

CSS入门5-选择器

(n) 选择父元素的第n个子元素，父元素是E，子元素是F E F:nth-last-child(n) 选择父元素的倒数第n个子元素，父元素是E，子元素是F E F:nth-of-type(n) 选择父元素的具有指定类型的第...n个子元素，父元素是E，子元素是F E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素，父元素是E，子元素是F E:first-of-type 选择父元素中具有指定类型的第...1个子元素，与E:nth-of-type(1)相同 E:last-of-type 选择父元素中具有指定类型的最后1个子元素，与E:nth-last-of-type(1)相同 E:only-child 选择父元素中只包含一个子元素...，子元素是E E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是E E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点 　　[注意]n可以是整数(从1开始)，...匹配所有元素中的第一个元素 p:first-child i 匹配所有作为第一个子元素的元素中的所有 元素 6、:lang 相当于|=属性选择器(IE7-不支持) p:lang(en

83230

    • CSS3新增选择器

    下面介绍： css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性选择器语法如下（E表示标签）： 选择器 功能描述 E[attribute] 选取带有指定属性的元素...E的子元素 E:nth-of-type(n) 选择所有在其父元素中同类型第n个位置的匹配E的子元素 E:nth-last-of-type(n) 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素...E:last-child 选择位于其父元素中最后一个位置，且匹配E的子元素 ，与E:nth-last-child(1)等同 E:fisrt-child 选择位于其父元素中第一个位置，且匹配E的子元素 ，...与E:nth-child(1)等同 E:first-of-type 选择在其父元素中匹配E的第一个同类型子元素 E:last-of-type 选择在其父元素中匹配E的最后一个同类型子元素 E:only-child...选择在其父元素中只包含一个子元素，且该子元素匹配E。

    56140

    jquery 常用方法总结

    ")   层次选择器       $("div p") 包含选择器 div中所有的p 子元素 子子元素..      ...$("div > p")  子后代选择器 div中直接子后代       $("div + p")第一个兄弟p   简单选择器       :first 选取第一个元素   $("div:first")...        :last 选取最后一个元素       :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")       :even、:odd，选取索引是奇数、偶数的元素...map([1,2,3]funtion(n){return n+1;}       .click(funtion(){})       .mouseover(funtion(){})        .mouseout...：的有简单选择器和表单选择器和表单对像选择器 还有一个内容选择器，$("div:contains('John')")        这里有一个特别的表单元素。

    1.7K00

    【CSS3】CSS3 结构伪类选择器 ( E:first-child E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

    一、CSS3 结构伪类选择器 ---- 常见的 结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素...: 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child(n) 选择器 缺陷 : 如果 父容器 中的子元素类型不同 , 那么使用 E:nth-child...(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child(n) 选择器中的 n 可以有如下情况 : 数字 : 数字代表 父容器中子元素的索引值...; n 从 1 开始计数 ; ul li:nth-child(1) { /* 结构伪类选择器 选择 ul 父容器下的 第 1 个 li 子元素 */...(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child(n) 选择器 缺陷 : 如果 父容器 中的子元素类型不同 , 那么使用 E:nth-child

    1.3K30

    css 总结1 原

    6、CSS 后代选择器 h1 em {color:red;} 7、CSS 子元素选择器 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。...选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素父元素的第一个子元素，若第一个子元素不是p元素，则匹配不到任何元素 p:first-of-type...p，没有其他的子元素 （8）only-of-type        // p:only-of-type （匹配p的父元素只有一个p元素，子元素可能包含其他的元素） （9）  :nth-child(n)...选择属于父元素的第n个子元素 （10）:nth-last-child(n) 选择属于父元素倒是第n个元素 （11）p:nth-of-type(n) 选择属于其父元素第n个p元素（不是p元素的不在排序范围...） （12）p:nth-last-of-type(n) 选择属于其父元素倒数第n个p 元素 （13）p:empty 选择p元素没有内容的p元素 （14）target伪类 #news:target

    67430

    5.CSS层次选择器-CSS进阶

    CSS层次选择器 选择器 说明 M N 后代选择器，选择M元素内部后代N元素（所有的N元素） M>N 子代选择器，选择M元素内部子代N元素（所有第1级N元素） M~N 兄弟选择器，选择M元素后所有的同级...M N 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素） 1.后代选择器 后代选择器：选中元素内部中所有的指定的某个元素，包括子元素和其它后代元素。...和后代选择器很相似，但却有不同。 （1）语法格式 M>N{} ① 说明 M元素和N元素之间用 > 隔开，表示选中M元素内部的子元素N。...（2）子代选择器与后代选择器区别 后代选择器，选取的是元素内部所有的元素，包括子元素。 子代选择器，选取的是元素内部某一个元素，只限子元素。 （3）示例 ① 例1 1）语法格式 M N{} ① 说明 M元素和N元素之间用 + 隔开，表示选中 M 元素后面某一个相邻的兄弟元素 N。

    1.5K41

    CSS3选择器–结构性伪类选择器

    在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种...因为nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，这样的话，p2其实是第三个元素，但是h1和h2由于没有被选中，所以颜色不变。...2、E:nth-of-type(n) 和E:nth-last-of-type(n) 1）“E:nth-of-type(n)”选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素...3、E:first-child和E:last-child 1）“E:first-child”选择器表示的是选择父元素的第一个子元素的元素E。...简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 案例代码： <!

    55110

    初识CSS3

    ">hhhh   注意:id选择器只能使用一次，也就是说在同一页面同一个id属性只能设置一次；而类选择器可以在页面使用多次  3)选择器的优先级 　　id选择器>class类选择器>标签选择器...层次选择器   　　1）E F  后代选择器  选择匹配的F元素，且匹配的F元素被包含在匹配的E元素中  　　2） E>F  子选择器   选择匹配的F元素，且匹配的F元素是匹配E元素的子元素  　　3...E元素相邻的后面兄弟元素下，是一个或多个元素；  　　2）相邻兄弟选中的是与E元素仅挨的F元素，其中选中的仅是一个元素 8.结构伪类选择器  　　1）E：first-child   作为父元素的第一个子元素的元素...E 　　 2） E：last-child   作为父元素的最后一个子元素的元素E  　　3）E F：nth-child（n）  选择父级元素E 的第n个元素F（n可以是1/2/3）关键字为even  odd...(n)  选择父元素内具有指定类型的第n个F元素 注：E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点：  　　　　　1）E F：nth-child（n）在父级里从第一个元素开始查找

    78080

    CSS 基础

    一、什么是CSS对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定二、CSS发展史三、CSS基本语法结构1、语法选择器{ 声明1; 声明2; … }2、例如h1...标签，类选择器可在页面中多次使用，ID选择器在同一个页面中只能使用一次5、基本选择器的优先级ID选择器>类选择器>标签选择器七、CSS的高级选择器1、层次选择器选择器类 型功能描述E F后代选择器选择匹配的...F元素，且匹配的F元素被包含在匹配的E元素内E>F子选择器选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面E~F通用兄弟选择器选择匹配的...作为父元素的第一个子元素的元素EE:last-child作为父元素的最后一个子元素的元素EE F:nth-child(n)选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、oddE...:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-type选择父元素内具有指定类型的最后一个E元素E F:nth-of-type(n)选择父元素内具有指定类型的第n个

    30930

    CSS选择器

    下述内容主要讲述了《HTML5权威指南》第17、18章关于“使用CSS选择器（第I部分、第II部分）”。 一、前传 1....后代选择器：匹配任意包含在匹配第一个选择器的元素中的元素，而不仅是直接子元素。 子代选择器：只匹配元素中的直接后代。 示例：相邻兄弟选择器&普通兄弟选择器 选择器 说明 :root 匹配文档中的根元素（返回html元素） :first-child 选择元素的第一个子元素 :last-child 选择元素的最后一个子元素 :only-child 选择元素的唯一子元素...:only-of-type 选择元素指定类型的唯一子元素 :nth-child(n) 选择父元素的第n个子元素 :nth-last-child(n) 选择父元素的倒数第n个子元素 :nth-of-type...(n) 选择父元素定义类型的第n个子元素 :nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素 示例：子元素选择器 <!

    1.4K51

    jQuery选择器和选取方法

    由于第一个元素的序号是0，因此实际上选中的是第1个、第3个、第5个等元素(jQuery的扩展) :file 匹配元素(jQuery的扩展) :first 匹配列表中的第一个元素...更常见的情况是，n是xn或x n+y这种计算公式，其中x和y是整数，n是字面量n。因此可以用nth-child(3n+1)来选取第1个、第4个、第7个等元素。...注意该过滤器的序号是从1开始的，因此如果一个元素是其父节点的第一个子元素，会认为它是奇数元素，匹配的是3n+1，而不是3n。...例如，下面这个选择器选取的元素在其父节点的子元素中排行第1或第2等，只要它们含有“JavaScript”单词，就不包含元素。...first()返回的jQuery对象仅包含选中元素中的第一个，last()返回的jQuery对象则只 包含最后一个元素。更通用的是，eq()方法返回物Query对象只包含指定序号的单个选中元素。

    5.2K40

    常用的CSS3选择器

    （1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...（2）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。...:first-child和:last-child选择器 :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。...:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。

    4.1K20

    CSS 1.0~3.0选择器（下）

    HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些...n个子元素，第一个编号为1E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素...(1)E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type...匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)E:empty匹配一个不包含任何子元素的元素...，注意，文本节点也被看作子元素 10.CSS 3的反选伪类 选择器含义示例E:not(s)匹配不符合当前选择器的任何元素:not(p) { border:1px solid #ccc; } 11.

    76930

    CSS选择器详解

    (n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效 ...html，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E /* 设置第一个元素类型为 p 的元素为红色...CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素...(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中父元素的倒数第

    2.9K40

    css3选择器

    CSS3新增选择器 属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值...n) 表示E父元素中的第n个字节点，且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算 E:empty 表示E元素中没有子节点。...注意：子节点包含文本节点 E:first-child 表示E元素中的第一个子节点==nth-child(1) E:last-child 表示E元素中的最后一个子节点 E:first-of-type...表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。...E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection

    44420

    一文学会Python爬虫框架scrapy的XPath和CSS选择器语法与应用

    使用XPath选择器和CSS选择器解析网页的速度要比BeautifulSoup快一些。...表1 XPath选择器常用语法 语法示例 功能说明 div 选择当前节点的所有div子节点 /div 选择根节点div //div 选择所有div节点，包括根节点和子节点 //ul/li 选择所有ul.../a[last()] 选择div节点内部最后一个a节点 //div/a[last()-1] 选择div节点内部倒数第二个a节点 //a[position()>3] 选择每组中第4个开始往后的a节点 //...的节点 ul li 选择所有位于ul节点内部的li子节点 ul>li 选择所有位于ul节点内的直接子节点li base+title 选择紧邻base节点后面的第一个平级title节点 br~img 选择所有与...a:nth-child(3) 选择第3个a节点 a:nth-child(2n+1) 选择所有第奇数个a节点 a:nth-child(2n) 选择所有第偶数个a节点 li:last-child 选择每组中最后一个

    1.7K11

    这30个CSS选择器，你必须熟记（下）

    指序列里的第n个元素，从1开始。...X:nth-of-type(n)：选择每第n个某种元素选择器 有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表...X:nth-last-of-type(n)：从后往前计算选择每第n个某种元素选择器 比如我们可以使用nth-last-of-type来选择倒数第n个元素。...X:first-child：第一个子元素选择器 这个选择器通常选择第一个子元素，我们常常为第一个或者最后选项卡设置默认的视觉效果，比如去掉元素的边框，示例代码如下： ul >li:first-child...X:last-child：最后一个子元素选择器 有第一个子元素选择器，自然会有最后一个子元素选择器，示例代码如下： ul > li:last-child { color: green; } 比如下面一个例子

    55220
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券