lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            /* 清除ul的默认样式 */
            list-style: none;
        }
        /* 包含选择器 */
        .list li {
            width: 450px;
            height: 80px;
            background: #0f0;
            /* 文字在已知宽高的盒子内
                垂直居中的line-height就是当前高度
            */
            /* 文本位置 */
            text-align: center;
            /* 行间距 */
            line-height: 80px;
        }
        a {
            /* 清除a标签默认样式 */
            text-decoration: none;
            /* text-decoration: underline; */
            /* 添加划线
                underline 下划线
                overline 上划线
                line-through 删除线
                none 无样式
            */
        }

        /* 划过 */
        /* 伪类选择器 */
        /* :hover 划过*/
        /* .list li:hover{
            background: #ff0;
        }
        .list li a:hover {
            color: red;
        } */
        .list li:nth-child(3) a {
            color: red;
        }
        .list li:last-child a {
            color: #000;
        }
        /* 
            :nth-child()自定义子类
            奇数 2n+1 odd
            偶数 even 2n
            :first-child 第一个
            :last-child 最后一个
        */
    </style>
</head>
<body>
    <!-- 
        类选择器：
        在body标签中 
            开始标签上 class="xxx"
        在style上 
            .xxx {代码}
     -->

    <ul class="list">
        <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>