CSS :nth-child

这篇具有很好参考价值的文章主要介绍了CSS :nth-child。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS :nth-child

:nth-child 伪类根据元素在同级元素中的位置来匹配元素.

  • CSS :nth-child
    • 语法
      • 值是关键词 odd/even
      • An+B
      • 最新的 [of S] 语法
      • 权重
    • 浏览器兼容性

很简单的例子, 来直觉上理解这个伪类的意思

<ul>
  <li class="me">Apple</li>
  <li>Banana</li>
  <li class="me">Peach</li>
</ul>
<ul>
  <li>Apple</li>
  <li class="me">Banana</li>
  <li class="me">Peach</li>
</ul>
.me:nth-child(1) { background-color: salmon; }  

CSS :nth-child,css,前端,css,n-th,css3,设计

你也许会奇怪🤔, 为什么下边一组的 Banana 背景不是红色呢? 因为 .me:nth-child(1) 表示选中同级元素中的第一个元素并且该元素 class 包含 me✅, 注意不是选中第一个 class 包含 me 的元素. 所以, 如果同级元素中的第一个元素的 class 不包含 me, 也不会选中.

语法

:nth-child() 语法中, 统计的元素包含同级的任何类型元素.

:nth-child() 的完整语法如下, ? 前面的 [] 中内容表示可选, 稍后会介绍这种最新的部分. :nth-child() 只接受一个参数, 该参数描述匹配同级元素的模式, 元素索引从 1 开始, 注意不是 0.

:nth-child(<nth> [of S]?) { ... }

值是关键词 odd/even

  • odd: 表示在同级元素中奇数位置的元素: 1、3、5…
  • even: 表示在同级元素中偶数位置的元素: 2、4、6…

比如, 在一个表格中我们希望相邻行的背景颜色不同, 这样方便阅读, 就可以这样写

tr:nth-child(even) { background-color: azure; }
<table border="1">
  <thead>
    <tr>
      <th>NAME</th><th>AGE</th> <th>COUNTRY</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Levi</td> <td>18</td> <td>China</td>
    </tr>
    <tr>
      <td>June</td> <td>23</td> <td>USA</td>   
    </tr>
    <tr>
      <td>JiaXin</td> <td>20</td> <td>China</td>
    </tr>
    <tr>
      <td>Mike</td> <td>22</td> <td>UK</td>
    </tr>
  </tbody>
</table>

CSS :nth-child,css,前端,css,n-th,css3,设计

An+B

不论是 odd 还是 even, 他们都是更普遍表达的特殊情况的简便写法. 使用 An+B 这种记号你可以自由定制你的匹配规则

  • A: 整数步长
  • n: 非负整数, 从 0 开始
  • B: 整数偏移量

为什么我们说 odd/evenAn+B 特殊取值时的简便写法呢? 因为

  • odd -> :nth-child(2n+1)
  • even -> :nth-child(2n)

下面我们就看看 An+B 取不同值的特定用法吧

  • :nth-child(2): 表示第二个元素
    CSS :nth-child,css,前端,css,n-th,css3,设计
.two:nth-child(2) { background-color: salmon; }
<ul class="flex-1">
  <li class="two">1</li>
  <li class="two">2</li>
  <li class="two">3</li>
</ul>
<ul class="flex-1">
  <li class="two">1</li>
  <li class="two" hidden>2</li> <!-- !!! -->
  <li class="two">3</li>
</ul>

从上图中可以看到, 左边的符合我们的预期, 第二个元素并且 classtwo 的元素背景红了, 但是左边的好像不太行, 因为 displaynone 的元素也被考虑进来了!!!

  • :nth-child(3n): 表示第3、6、9…个元素.
    CSS :nth-child,css,前端,css,n-th,css3,设计

  • :nth-child(n+5): 表示第5、6、7、8、9…个元素. 也就是第五个和后面的元素.
    CSS :nth-child,css,前端,css,n-th,css3,设计

  • :nth-child(-n+3): 表示第1(-2+3)、2(-1+3)、3(-0+3)个元素. 如果 n 的值继续增加, 就会选中第0、-1、-2…个元素, 负数位置的元素不存在并且元素是从 1 开始索引的.
    CSS :nth-child,css,前端,css,n-th,css3,设计

  • :nth-child(4n+1): 表示第1、5、9…个元素
    CSS :nth-child,css,前端,css,n-th,css3,设计

  • :nth-child(n): 表示每一个元素

  • :nth-child(1): 表示第 1 个元素, 是 n 为 1 更特殊的情况
    CSS :nth-child,css,前端,css,n-th,css3,设计

.n:nth-child(n) {
  background-color: salmon;
}
.n:nth-child(1) {
  border-width: 3px;
}
  • :nth-child(n+3):nth-child(-n+5): 表示第3、4、5个元素. 用于选择一个具有上下限范围内的元素
    CSS :nth-child,css,前端,css,n-th,css3,设计

最新的 [of S] 语法

目前 :nth-child() 只能选择特定位置的元素, 比如 .name:nth-child(-n+3) 只能选择元素中 class 包含 name 的并且是所有元素中的前三个元素. 但是, 如果我们想要选择前三个 class 包含 name 的元素呢? 那就是最新的 of S 语法

下面的例子

.class1 > .item:nth-child(-n+3 of .name) {
  background-color: salmon;
}
<ul class="class1">
  <li class="name item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="name item">6</li>
  <li class="item">7</li>
  <li class="item">8</li>
  <li class="name item">9</li>
  <li class="name item">10</li>
</ul>

CSS :nth-child,css,前端,css,n-th,css3,设计

📖一定要留意两者的不同哦.

你可能问新的语法有什么用呢, 当然有用啦, 比如我们在给表格添加间隔背景时, 如果出现一行元素被隐藏的情况, 会出现什么效果呢?

tr:nth-child(even) {
  background-color: azure;
}
<tbody>
  <tr></tr>
  <tr hidden></tr>
  <tr></tr>
  <tr></tr>
</tbody>

CSS :nth-child,css,前端,css,n-th,css3,设计

哇! 被隐藏的那一行也被考虑进入了, 按理说应该只有第二行(JiaXin)才有阴影的, 怎么办呢? 使用 of S. 我们不是要选择偶数行, 而是要选择所有 hiddenfalse 的偶数行.

tr:nth-child(even of :not([hidden])) {
  background-color: azure;
}

CSS :nth-child,css,前端,css,n-th,css3,设计

权重

:nth-child() 的权重是单个伪类的权重. 如果使用 of S 语法, 那么就是单个伪类的权重加上 S 中权重最高的权重值.

<div>
  <div id="country1" class="country1">CHINA</div>
</div>
.country1:nth-child(1) {
  color: blue; /** WIN  */
}
.country1 {
  color: red;
}

CSS :nth-child,css,前端,css,n-th,css3,设计

如果我们再加一个呢?

:nth-child(1 of #country1.country1) {
  color: green; /** WIN */
}

CSS :nth-child,css,前端,css,n-th,css3,设计

浏览器兼容性

根据 MDN, of S 的新语法需要比较新的浏览器支持
CSS :nth-child,css,前端,css,n-th,css3,设计

谢谢你看到这里😊文章来源地址https://www.toymoban.com/news/detail-608128.html

到了这里,关于CSS :nth-child的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】nth:children以及浏览器内核webkit使用(滚动条样式修改)

    😉博主:初映CY的前说(前端领域) ,📒本文核心:nth:children以及浏览器中的webkit使用 前言:在页面的编写中使用了多个标签通常有需求去处理下特殊的样式,我们常见做法是给我们的标签加上一个类或者通过标签选择器去写我们的css样式,但是不想写类了还可以用啥选择到我

    2024年02月11日
    浏览(62)
  • react CSS :last-child 最后一个下边框线如何去掉

    需求:调用分类接口后,tab的最后一个border不要横线。  代码如下 逻辑是 i是否等于books数组的长度-1。  books.map((book, i) = {   return(     View style={borderBottom:idx !== dictype.length - 1 \\\"1px solid #ECEFF7\\\"} key={i}       /View   ); });

    2024年02月16日
    浏览(64)
  • 【前端 - CSS】第 17 课 - CSS 特性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、CSS 三大特性 2.1、继承性 2.2、层叠性 2.3、优先级 3、总结          CSS 是一种用于样式化网页的语言,它具有 选择器 和 属性 的结构。通过

    2024年02月10日
    浏览(49)
  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(47)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(47)
  • 前端框架的CSS模块化(CSS Modules)

    创作纪念日之际,来给大家分享一篇文章吧 聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些

    2024年03月27日
    浏览(48)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 【前端|CSS系列第4篇】CSS布局之网格布局

    最近在做的一个项目前台首页有一个展示词条的功能,每一个词条都以一个固定大小的词条卡片进行展示,要将所有的词条卡片展示出来,大概是下面这种布局 每一行的卡片数目会随着屏幕大小自动变化,并且希望整个卡片区域周围不要有太大的留白,可是由于本人css学的并

    2024年02月16日
    浏览(40)
  • 【前端面经】CSS-CSS的工程化

    CSS 工程化的目的是解决以下问题: 宏观设计 :如何组织 CSS 代码、如何拆分、如何设计模块结构? 编码优化 :如何编写更好的 CSS 代码? 构建 :如何处理 CSS 代码,以让打包结果最佳? 可维护性 :代码写完后,如何最小化后续变更的成本?如何确保任何同事都能轻松接手

    2024年02月03日
    浏览(35)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包