如何单独给li其中的某个元素进行属性设置

最新推荐文章于 2024-07-19 15:50:46 发布

an1234561

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量287

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/an1234561/article/details/130666774

版权

<style>
        *{
            margin: 0;
            padding: 0;
            /* 去除li符号 */
            list-style: none;
        }
        .box{
            display: flex;
            align-items: center;
            height: 50px;
            background-color: aquamarine;
        }
        .box .box-1{
            margin: auto;
            width: 1200px;
            background-color: azure;

        }
        .box .box-1 ul{
            display: flex;
            justify-content: space-between;
            padding: 2px 10px;
        }
        .box .box-1 ul a{
            color: aqua;
            text-decoration: none;
        }  
        /* 让a元素的下边框在默认的时候第一个显示，后面的在鼠标悬停时显示 */
         /* 两种实现方法 */
         /* 第一种,用结构选中器选中第一个值即可,后面的用伪类选择器 */
        .box .box-1 ul li:first-child,.box .box-1 ul a:hover{
            border-bottom: 3px solid #ddd;
        }
         /* 第二种,单独给第一个添加类选择器,后面的用伪类选择器 */
        .box .box-1 ul .e,.box .box-1 ul a:hover{
            border-bottom: 3px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-1">
            <ul>
                <li><a href="#" class="e">首页</a></li>
                <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>
                <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>
                <li><a href="#">首页</a></li>
            </ul>
        </div>
    </div>

如。。。。。。