在css3中,odd和even用于在伪类选择器中作为关键字选中指定元素,odd表示奇数元素,even表示偶数元素;odd和even常与“:nth-child(n)”选择器配合使用,语法“元素:选择器(odd或even){css样式代码}”。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。
odd代表奇数,even代表偶数。
odd和even常用于在伪类选择器中选中指定的元素。
示例如下:
立即学习“前端免费学习笔记(深入)”;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/10382">
<img src="https://img.php.cn/upload/webcode/000/000/003/176178780689882.png" alt="行盟APP1.0 php版">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/10382">行盟APP1.0 php版</a>
<p>行盟APP是结合了通信和互联网的优势,加之云计算所拥有的强大信息资源,借助广大的终端传递服务,潜在的拥有巨大商机。她到底是什么,又有什么作用?她是一款手机应用软件;她是一款专门为企业服务的手机应用软件;她是一款能够将企业各种信息放入其中并进行推广传播的手机应用软件!只要轻轻一点,企业的简介,产品信息以及其他优势就能最快最大限度的透过手机展现在客户的眼前,一部手机,一个APP,你面对的将是一个6亿&</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="行盟APP1.0 php版">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/10382" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="行盟APP1.0 php版">
</a>
</div>
<p>The third paragraph.</p>
<p><b>注意:</b> Internet Explorer 8 and以及更早版本的浏览器 :nth-child()选择器.</p>
</body>
</html>输出结果:

(学习视频分享:css视频教程)
以上就是css3中odd和even的用法是什么的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号