更换li列表里面图片图标的方法

心刻

于 2020-04-17 20:23:50 发布

阅读量2k

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/weixin_44679078/article/details/105311473

版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS属性选择器优化图标样式的方法，通过省去额外的类名，简化了HTML结构，同时保持了样式的灵活性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：用属性选择器
优点，省了一个类名

<ul class="local-nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon1"></span>
                <span>景点·玩乐</span>
            </a>
        </li>
</ul>
/*---------------------------------------------*/
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}