CSS里面能用odd吗-前端问答-PHP中文网

首页

web前端

前端问答

CSS里面能用odd吗

青灯夜游

May 18, 2022 pm 06:40 PM

css css3

CSS里面能用odd。在CSS中，odd可以在伪类选择器中作为关键字选中指定元素，常作为“:nth-child()”选择器的参数，用于选取父元素中奇数行的指定子元素，语法“指定子元素:nth-child(odd){//css样式}”。

CSS里面能用odd吗

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS里面能用odd。

odd的意思为“奇数”，在CSS中，可以在伪类选择器中作为关键字选中指定元素。

odd常与“:nth-child(n)”选择器配合使用，作为该选择器的参数，用于选取父元素中奇数行的指定子元素

指定子元素:nth-child(odd){//css样式}

登录后复制

说明：相对于odd，还有一个关键字even（偶数），和“:nth-child(n)”选择器配合使用，可选取父元素中偶数行的指定子元素

示例：实现表格的隔行变色

即奇数行一个颜色，偶数行一个颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			tr:nth-of-type(even){
				background:red;
			}
			tr:nth-of-type(odd){
				background:pink;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>商品</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>T恤</td>
				<td>￥100</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>￥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>￥150</td>
			</tr>
		</table>
	</body>
</html>

登录后复制

扩展知识：

:nth-child(n)选择器匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。

n 可以是一个数字，一个关键字，或者一个公式。

:nth-child 是 CSS3 提供的一个好用的选择器，因为在项目中经常用到，所以简单总结了它的常用方法，下面示例代码截图用的是同一个例子，p元素的父元素都是body

p:nth-child(2)

表示给第2个p元素添加背景色，p:nth-child(3)是第3个p元素，以此类推

p:nth-child(2)

承接上面的示例，如果这里的p元素前面还有其它元素，结果如下图，段落1被添加背景色，而不是上面示例的段落2被添加背景色，

因为这里的p:nth-child(1)为h1元素,，所以p:nth-child(2)才为p元素

p:nth-child(3n)

表示给3的倍数的p元素添加背景色，2n就是2的倍数，4n就是4的倍数，以此类推

p:nth-child(odd)

表示给所有奇数p元素添加背景色

p:nth-child(even)

表示给所有偶数p元素添加背景色

使用公式 (an + b)，描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值

另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式

注：公式里的n，不区分大小写

p:nth-child(2n+1)

可以简单理解为等同于 p:nth-child(odd)

p:nth-child(2n+0)

可以简单理解为等同于 p:nth-child(even)

p:nth-child(n+2)

表示正向范围，从第2个p元素开始（包括第2个p元素）到最后一个p元素都添加背景色（这里范围指2-5）

p:nth-child(-n+5)

表示负向范围，从最后一个p元素（包括最后一个元素）到第一个p元素都添加背景色（这里范围指5-1）

（学习视频分享：css视频教程、web前端）

以上是CSS里面能用odd吗的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7725

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。