奇数偶数设置背景

最新推荐文章于 2023-07-17 17:08:20 发布

Jaieesa

最新推荐文章于 2023-07-17 17:08:20 发布

阅读量858

点赞数

本文链接：https://blog.csdn.net/edcxx/article/details/117692357

版权

CSS :nth-of-type 背景颜色奇偶行列表样式

关键词由CSDN通过智能技术生成

页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇数、偶数</title>
</head>
<body>
    <style type="text/css">
    .oe{
        list-style: none;
        width: 250px;
    }
    .oe li:nth-of-type(odd){
        background:green
    }
    .oe li:nth-of-type(even){
        background: red;
    }
    </style>
    <ul class="oe">    
        <li>li+1</li>
        <li>li+2</li>
        <li>li+3</li>
        <li>li+4</li>
        <li>li+5</li>
        <li>li+6</li>
    </ul>
</body>
</html>

效果图