html - css 背景图像 css 不适用于 ul 属性

Question

我对 ul 中的背景图像属性有问题

这是 html:

<ul class="nav" style="margin-top: 15px;">
<li style="display: table-cell;"><a class="facebook1" href="https://www.facebook.com/demo" target="_block"></a></li>
    <li style="display: table-cell;"><a class="twitter" href="https://twitter.com/MobilityGo1" target="_block"></a></li>
    <li style="display: table-cell;"><a class="youtube" href="https://www.youtube.com/bcmlpn" target="_block"></a></li>
    <li style="display: table-cell;"><a class="pinterest" href="https://www.facebook.com/demo" target="_block"></a></li>
    <li style="display: table-cell;"><a class="instagram" href="https://www.facebook.com/demo" target="_block"></a></li>
</ul>

CSS:

/*social icons*/

a.facebook1 {
width: 30px;
height: 30px;
padding-left: 5px;
background: url("/files/assets/facebook1.png") no-repeat;
background-size: 30px 30px;
}
a.twitter {
width: 30px;
height: 30px;
padding-left: 5px;
background: url("/files/assets/twitter.png") no-repeat;
background-size: 30px 30px;
}
a.youtube {
width: 30px;
height: 30px;
padding-left: 5px;
background: url("/files/assets/youtube.png") no-repeat;
background-size: 30px 30px;
}
a.pinterest {
width: 30px;
padding-left: 5px;
height: 30px;
background: url("/files/assets/pinterest.png") no-repeat;
background-size: 30px 30px;
}
a.instagram {
width: 30px;
padding-left: 5px;
height: 30px;
background: url("/files/assets/instagram.png") no-repeat;
background-size: 30px 30px;
}
/*social icons*/

类 a.social 网络显示图标但不显示第一个图标

例如，当我们在网页中显示时，a.facebook1 不显示。

如果我在 a.facebook1 之前添加另一个社交图标类，则不会显示，而包括 facebook1 在内的其他图标将显示

http://prntscr.com/6chstf

更新:

我解决了将这些行移动到 css 文件的顶部

Answer 1

尝试在 CSS 中添加以下内容

.nav li > a { display: block;}