logo图片背景加链接的下面的2种写法哪种合适？

Question

初学CSS，在写logo图片背景加链接的时候发现下面2种代码都可以实现，哪种更合适一些呢？

第一个是这样写：

#logo {
    float: left;
    width: 160px;
    height: 50px;
    background-image: url(./images/[e-mail]);
    background-image: -webkit-image-set(
        url(./images/[e-mail]) 1x,
        url(./images/[e-mail]) 2x);
}

#logo a {
    display: block;
    width: 160px;
    height: 50px;
    text-indent: -9999em;
}

第二个是这样写：

#logo {
    float: left;
}

#logo a {
    display: block;
    width: 160px;
    height: 50px;
    background-image: url(./images/[e-mail]);
    background-image: -webkit-image-set(
        url(./images/[e-mail]) 1x,
        url(./images/[e-mail]) 2x);
    text-indent: -9999em;
}

谢谢，请指教。

Answer 1

问题解决的方法本来就有多种，只要没带来新的问题，个人觉得都是可以的。至于好坏之分，可以从拓展性、代码简洁性等因素上来考虑。比如你这个如果要求鼠标滑过的时候，背景图片有变化，或者需要个什么效果，这时就最好采用下面这种写法。

Answer 2

从你提供的仅有的代码来分析，没有什么太大区别。第一段代码是把背景图片加的父元素(#logo)上，而第二段代码是把背景图片加到子元素(a)上。因此，那种合适只有根据具体业务逻辑才能具体分析。