CSS实现奇数、偶数、指定数样式

最新推荐文章于 2024-08-15 00:06:54 发布

一个橙子呀

最新推荐文章于 2024-08-15 00:06:54 发布

阅读量1.4k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hong521520/article/details/115619223

版权

本文介绍了CSS中实现奇数、偶数以及指定数样式的四种方法：简单数字序号、倍数写法、倍数分组匹配和奇偶匹配。详细解释了每种方法的语法和应用，例如通过2n+1匹配奇数位置元素，通过2n匹配偶数位置元素，以及如何使用3n+1等表达式进行分组匹配。

摘要由CSDN通过智能技术生成

第一种：简单数字序号写法

直接匹配第number个元素。参数number必须为大于0的整数。

:nth-child(number)

第二种：倍数写法

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

li:nth-child(3n){
   background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个橙子呀

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

表格列表偶数列、奇数列的CSS样式示例

09-25

本示例探讨了如何使用CSS为表格列表实现特定的样式，包括偶数列、奇数列、鼠标悬停时的样式以及标题列的样式。这对于创建有吸引力且易于阅读的数据展示非常有用。首先，我们看HTML部分。这里有一个`<table>`元素，...

CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child

colin5210的博客

06-22

1万+

CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child、not

参与评论您还未登录，请先登录后发表或查看评论

css——奇数、偶数、指定数样式

weixin_45472548的博客

10-11

3609

第一种：简单数字序号写法 :nth-child(number) //直接匹配第number个元素。参数number必须为大于0的整数例如：li:nth-child(3){background:orange;}/把第3个LI的背景设为橙色/ 第二种：倍数写法 :nth-child(an) //匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n 例如：li:nth-child(3n){background:orange;}/把第3、第6、第9、…、所有3的倍数的LI

css 中选择奇偶行

最新发布

weixin_64684095的博客

08-15

317

在 CSS 中，选择奇数行可以使用 nth-child(odd) 选择器，选择偶数行可以使用 nth-child(even) 选择器。

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

SunPeng的博客

09-03

7090

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

Css3选择器

qq_43203656的博客

03-16

398

大家好,今天我们来讲一下css3里的选择器方面的知识。相信很多同学会遇到想给单独的li 或者 a标签定义属性，但是又不想去给他单独起个类名，越起越乱。这个时候怎么办呢？就可以用到css3选择器了，让我们一点一点来了解一下：我们讲两种常见的选择器:属性选择器和伪类选择器首先我们说属性选择器，首先举个例子：我们先创建4个input，分别写不一样的值名我们用第一个选择器： E[att...

CSS_css选择器，选择所有子元素、最后一个、第一个、单数、双数、第n个、反选，nth-child，last-child，first-child

小歪博客

03-22

6807

html <div class="list"> <div></div> <div></div> <div></div> </div> <style> .list div{ width: 500px; height: 20px; margin-top: 5px; border: 1px solid #000; } </style> 选择全部 .list div{ back

jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

10-27

该函数的作用是遍历指定id的表格中所有的行，并根据行的索引是奇数还是偶数来应用相应的样式。这里使用了取余运算符%来判断索引值的奇偶性，index%2的结果为1表示当前行是奇数行，为0则表示为偶数行。在函数的末尾...

CSS实现表格样式及全选功能

12-12

本篇文章将深入探讨如何使用CSS来实现表格（TABLE）的样式美化以及添加全选功能。一、表格样式的基本设置 1. 表格边框：通过`border`属性可以设置表格的整体边框，如`border: 1px solid #ccc;`。为了使表格中的每...

j2ee23：jquery：使用jquery技术实现奇数行偶数行换色

08-12

实现奇数行偶数行换色的核心思路是遍历表格的每一行，并根据行的索引应用不同的CSS类或者直接设置背景颜色。以下是一个简单的示例代码： ```javascript $(document).ready(function() { // 选择表格中的所有行 $...

CSS实现一个简单loading动画效果

09-24

这个例子中，内外两个圆通过`border-radius`创建，`animation`属性的`alternate`值使得动画在奇数次正向播放，偶数次反向播放，形成连续的缩放效果。总的来说，CSS的`animation`属性结合`@keyframes`规则，可以...

选到你满意：完美掌握 css 选择元素的方法

Shids_的博客

03-17

1万+

选到你满意：完美掌握 css 选择元素的方法

css3对页面打印设置的一些特殊属性，如@page，target-counter等

u013994400的博客

11-17

4700

css3 对页面打印设置

CSS中如何选择ul下li的奇数、偶数行

阵雨的博客

08-12

1797

style> #Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin-left: 10px;}偶数行 style>

css中选取子元素

生存不忘生活

08-08

5805

1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch

css奇数偶数选择器

web前端开发

11-30

3万+

前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-c...

CSS基础知识

Hello_World_CFF的博客

07-13

111

1.选择第几个class：偶数，奇数，最后等列 .box-item:nth-child(odd){ border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; } .box-item:nth-child(even){ border-bottom: 1px solid #ccc; // border-left: 1px solid #ccc; } .box-item:nth-last-chi

css选择器:nth-child()的用法