11、实例针对同类型的元素进行计数，并区别奇与偶

最新推荐文章于 2023-01-05 22:46:48 发布

xuxianmei

最新推荐文章于 2023-01-05 22:46:48 发布

阅读量485

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/tlxxm/article/details/36895023

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>针对同类型的元素进行计数，并区别奇与偶</title><style type="text/css">
div{
    margin-left:20px;
    border:2px;
    border-radius:20%;}

    body
    {    
        background-color:#666;
    }
h2:nth-of-type(odd)
{
    background-color:yellow;
}
h2:nth-of-type(even)
{
    background-color:skyblue;
}

</style>
</head>
<!--
使用h2:nth-child(odd) 的意思是，当div元素中的第奇数个子元素是h2元素的时候使用。
-->

<body>
<div style="float:left;">
<h2>公司秋季旅游计划</h2>
<p>文章正文</p>
<h2>公司秋季旅游计划</h2>
<p>文章正文</p>
<h2>公司秋季旅游计划</h2>
<p>文章正文</p>
<h2>公司秋季旅游计划</h2>
<p>文章正文</p>
</div>
</body>
</html>

xuxianmei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11、实例针对同类型的元素进行计数，并区别奇与偶

针对同类型的元素进行计数，并区别奇与偶div{ margin-left:20px; border:2px; border-radius:20%;} body { background-color:#666; }h2:nth-of-type(odd){ background-color:yellow;}h2:
复制链接

扫一扫