css奇数偶数选择器

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

前端项目开发中,需要根据行数的奇数和偶数的不同,设置不同的颜色显示,以在视觉上给用户以良好的浏览体验,这里就需要使用css奇数偶数选择器。

主要用的::nth-of-type或者:nth-child。

方式一:nth-child

div:nth-child(odd){
 
 
} //奇数行
 
 
div:nth-child(even){
 
 
} //偶数行

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

方式二:nth-of-type

div:nth-of-type(odd){
  //奇数行  
} 
div:nth-of-type(even){
  //偶数行 
}

 文章来源地址https://www.toymoban.com/news/detail-685000.html

nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。

区别:nth-child ()  与 nth-of-type()

nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 

n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。

nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。

相同之处是,两者都是找到元素之后再与前面的选择符进行匹配,这里的匹配方式是一样的。

稍微往下延伸,清楚了查找方式,那么不管前面的选择符怎么变,最后都是先查找到元素再与前面的选择符进行匹配。

也就是说选择符与他们的查找方式没有关系。

 

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

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

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

相关文章

  • 数字交换奇数在前,偶数在后采用C语言形式

    这个交换中一个特殊情况就是,如果输入的数都是奇数或者偶数的情况下,哪么要考虑栈溢出问题,所以while循环中还要上(leftright)

    2024年02月16日
    浏览(44)
  • FPGA基础设计(二):任意分频器(奇数,偶数,小数)

    FPGA开发板上一般只有一个晶振,即一种时钟频率。数字系统设计中,时间的计算都要以时钟作为基本单元,对基准时钟进行不同倍数的分频而得到各模块所需时钟频率,可通过Verilog代码实现;倍频可通过锁相环【PLL】实现。 把输入信号的频率变成成倍的低于输入频率的输出

    2024年02月01日
    浏览(39)
  • C语言:调整数组使奇数全部都位于偶数前面

    输入 一个 整数数组 , 实现 一个 函数 , 来 调整 该 数组中数字的顺序 使得 数组中所有的奇数 位于 数组的前半部分 , 所有 偶数 位于 数组的后半部分 。 ( 奇数在 数组 前 面, 偶数在 数组 后 面)                       ==========================================================

    2024年02月13日
    浏览(42)
  • Verilog时钟分频(偶数分频、奇数分频、小数分频、半整数分频)

    偶数分频最容易实现,可以用计数器实现。计数值小的时候也可以使用DFF直接完成。这里使用计数器实现,计数达到分频系数一半的时候进行翻转(占空比为50%)。对应: 牛客 VL37 时钟分频(偶数) 仿真结果如下 不要求占空比为50%,可以与偶数分频一样,根据计数值进行波形

    2024年01月23日
    浏览(42)
  • 给定N个正整数,请统计奇数和偶数各有多少个?

    输入格式: 输入第一行给出一个正整 N (≤1000);第2行给出 N 个非负整数,以空格分隔。 输出格式: 在一行中先后输出奇数的个数、偶数的个数。中间以1个空格分隔。 输入样例: 输出样例:   运行结果:    

    2024年02月06日
    浏览(40)
  • Python,使用for循环计算0到一百的奇数或偶数之和。

           初始化变量 i , Sum , Sum_1 为0。         使用 for 循环遍历1到100之间的所有数字。         判断每个数是否是奇数或者是偶数:         如果 i % 2 的余数不为0,则 i 是奇数,将其累加到变量 Sum 中。         如果 i % 2 的余数为0,则说明 i 是偶数,将

    2024年04月27日
    浏览(39)
  • Python,使用for循环计算0到一百的奇数或偶数之和

    代码解析        初始化变量i,Sum,Sum_1为0。         使用for循环遍历1到100之间的所有数字。         判断每个数是否是奇数或者是偶数:         如果i % 2的余数不为0,则i是奇数,将其累加到变量Sum中。         如果i % 2的余数为0,则说明i是偶数,将其累加到变量S

    2024年04月28日
    浏览(34)
  • 4种FPGA时钟分频 【附源码】:1.偶数分频;2.奇数分频(占空比50%);3.奇数分频(任意无占空比);4.小数分频;

    题目来源于牛客网,完整工程源码:https://github.com/ningbo99128/verilog 目录 VL37 偶数分频 VL40 奇数分频(占空比50%) VL42 奇数分频(任意无占空比) VL41 任意小数分频(较难) 题目介绍 请使用D触发器设计一个同时输出2/4/8分频的50%占空比的时钟分频器;注意rst为低电平复位。

    2024年01月17日
    浏览(37)
  • for循环的输出控制(输出1-100中的奇数、偶数、倍数以及公倍数)

    一、输出1-100中所有的奇数: i = 1 while i = 100:     if i%2 == 1:         print(i)     i += 1   法二: for i in range(1,101):     if i%2 == 1:         print(i)   法三: for i in range(1,101,2):     print(i)     二、输出1-100中所有的偶数: for i in range(1,101):     if i % 2 == 0:         print(i)   三、

    2024年02月08日
    浏览(38)
  • (排序) 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 ——【Leetcode每日一题】

    难度:简单 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数在数组的前半部分,所有偶数在数组的后半部分。 示例: 输入:nums = [1,2,3,4] 输出:[1,3,2,4] 注:[3,1,2,4] 也是正确的答案之一。 提示 : 0 = n u m s . l e n g t h = 50000 0 = nums.length = 50000 0 =

    2024年02月12日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包