【css】css奇数、偶数、指定数选择器:

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


:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型
:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素

区别
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。
nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。
相同:都是找到元素之后再与前面的选择符进行匹配,这里的匹配方式是一样的。

一、简单数字序号写法:nth-child(number)

:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。

/* 把第3个LI的背景设为橙色 */
li:nth-child(3){
    background:orange;
} 
二、倍数写法:nth-child(an)

:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

/* 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色 */
li:nth-child(3n){
  background:orange;
}
三、倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)

:nth-child(an+b) 与 :nth-child(an-b)先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)

/* 匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+1){
    background:orange;
}
 
/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI */
li:nth-child(3n+5){
    background:orange;
}
 
/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(5n-1){
    background:orange;
}
 
/*相当于(3n)*/
li:nth-child(3n±0){
    background:orange;
}
 
/*相当于(3)*/
li:nth-child(±0n+3){
    background:orange;
}
四、反向倍数分组匹配:nth-child(-an+b)

:nth-child(-an+b)此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

/*匹配第8、第5和第2个LI*/
li:nth-child(-3n+8){
    background:orange;
}
 
/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/
li:nth-child(-1n+8){
    background:orange;
}
五、奇偶匹配:nth-child(odd) 与 :nth-child(even)

:nth-child(odd) 与 :nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。文章来源地址https://www.toymoban.com/news/detail-698942.html

//(偶数行)
.table > tr:nth-child(even) > td {
   background-color: #ccc;
} 
 
//(奇数行)
.table > tr:nth-child(odd) > td {
    background-color: #ccc;
} 

到了这里,关于【css】css奇数、偶数、指定数选择器:的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端基础HTML、CSS--6(CSS-3)

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

    2023年04月08日
    浏览(47)
  • HTML---CSS-引入样式表和选择器

    CSS : Cascading Style Sheet 层叠式样式表 HTML 用于控制网页的结构,CSS则用于控制网页的外观,想要做出美观好看的网页,CSS是必须的 引入外部样式表: 它的属性 rel 和 type 是固定的 语法: 引入内部样式表 type属性也是固定的 语法: 引入行内样式表 语法: 效果: HTML中有两个属

    2024年01月19日
    浏览(40)
  • web前端——HTML+CSS

    HTML CSS CSS进阶 CSS盒子模型 定位装饰 CSS精灵图 目录 基础认识  HTML  一、HTML概念 二、HTML页面固定结构  三、HTML标签的结构   四、标签学习 1、排版标签 1)标题标签  2)段落标签  3)换行标签 4)水平线标签  2、文本格式化标签  3、媒体标签 1)图片标签 2)路径  3)音

    2024年01月16日
    浏览(53)
  • 前端(HTML + CSS + JS)

    HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。 (1)HTML 文件基本结构 html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性 body 标签中写的是页面上显示的内

    2024年02月05日
    浏览(46)
  • 『 前端三剑客 』:CSS选择器

    上一篇文章我们介绍了 html 的常用标签及用法 , 这次我们来介绍 css 来对页面进行美化处理 css 全称 : 层叠样式表 (Cascading Style Sheets). 主要作用 : 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面 的效果. 能够做到 页面的样式和结构分离 . 一 . 基本语法 基本语

    2024年02月09日
    浏览(40)
  • 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日
    浏览(55)
  • 【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

    欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。 CSS,即层叠样式表(Cascading Style Sheets),是一种用于控制网

    2024年02月12日
    浏览(55)
  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(37)
  • Web 前端—HTML+CSS系列

    (1)知识点 :是制作网页的编程语言 浏览器把代码解析后的样子就是我们看到的网站 一个网站是由很多个网页组成的 查看网页代码源 (2).html网页制作 新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容—

    2024年02月04日
    浏览(54)
  • 前端基础:HTML和CSS简介

    目录 1、HTML 简介 (1)在 HTML 中引入外部 CSS (2)在 HTML 中引入外部 JavaScript 2、CSS 简介 (1)CSS 的基本语法 (2)三种使用 CSS 的方法 2.1 - 外部 CSS 的使用 2.2 - 内部 CSS 的使用 2.3 - 行内 CSS 的使用         HTML 指的是超文本标记语言 ( H yper  T ext  M arkup  L anguage), 标记语

    2024年02月16日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包