css3中odd和even的用法是什么-前端问答-PHP中文网

css3中odd和even的用法是什么

WBOY

发布： 2022-04-28 16:02:18

原创

9111人浏览过

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

css3中odd和even的用法是什么

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

css3中odd和even的用法是什么

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>

登录后复制

输出结果：