lovecoding
/
Vip0525


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        取消ul的默认样式:list-style: none;
        取消a的默认样式：text-decoration: none;
        添加划线：
        text-decoration
            line-through 中划线
            overline 上划线
            underline 下划线
     -->
    <style>
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        #aa {
            text-decoration: line-through;
        } 
        ul li {
            width: 100px;
            height: 40px;
            background-color: aqua;
            margin-top: 10px;
            /* 文字在已知宽高的盒子内居中 */
            text-align: center;
            /* 行间距 */
            line-height: 40px;
        }
        /* 包含选择器 */
        ul li a{
            color: #000;
            font-size: 16px;
        }
        /* 伪类选择器 
            :hover 划过
            :first-child 第一个子类
            :last-child 最后一个子类
            :nth-child(n) 第n个子类
                偶数项 even  2n
                奇数项 odd 2n+1
        */
        /* ul li a:hover {
            color: #ff0;
        } */
        ul li:hover {
            background-color: #f00;
        }
        ul li:hover a {
            color: #ff0;
        }
        /* ul li:first-child {
            background-color: pink;
        }
        ul li:first-child a {
            color: purple;
        }
        ul li:last-child {
            background-color: pink;
        }
        ul li:last-child a {
            color: purple;
        }
        ul li:nth-child(3) {
            background-color: pink;
        }
        ul li:nth-child(3) a {
            color: purple;
        } */
        
        ul li:nth-child(2n+1) {
            background-color: pink;
        }
        ul li:nth-child(2n+1) a {
            color: purple;
        }
    </style>
</head>
<body>
    <div id="aa">aaaa</div>
    <ul>
        <li><a href="">大额神卷</a></li>
        <li><a href="">大额神卷</a></li>
        <li><a href="">大额神卷</a></li>
        <li><a href="">大额神卷</a></li>
        <li><a href="">大额神卷</a></li>
    </ul>
</body>
</html>