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

CSS里面能用odd吗

青灯夜游

发布： 2022-05-18 18:40:21

原创

3182人浏览过

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>

登录后复制