css - 为什么我用背景图标替换列表项项目符号的 CSS 停止工作？

Question

这个 CSS 用于替换列表项项目符号的社交媒体图标，但现在它为我提供了一个列表，显示项目符号、图标和文本一起粉碎。

为什么有“列表样式：无；” 停止工作？

.social-follow {
  margin: 0.2em 0 2em 3em;
}

.social-follow ul.follow-background {
  list-style: none outside !important;
  margin: 0 0 0 0.6em;
  padding: 0 0 0 0.6em;
  overflow: hidden;
}

.social-follow ul.follow-background + li.follow {
  line-height: 32;
  background: no-repeat left 1px;
  /** fixed vertical position **/
  margin: 0.3em 0 0 -0.6em;
  padding: 0 0 0 2.7em;
  overflow: hidden;
}

li.follow.chapicon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-32x32-28x28.png') no-repeat left 1px;
}

li.follow.facebookicon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/facebook-icon-28x28.png') no-repeat left 1px;
}

li.follow.flickricon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/fluid-flickr-logo-28x28.png') no-repeat left 1px;
}

li.follow.instaicon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/instagram-logo-28x28.png') no-repeat left 1px;
}

li.follow.linkedinicon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/linkedin-logo-28x28.png') no-repeat left 1px;
}

li.follow.pinteresticon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/pinterest-logo-28x28.png') no-repeat left 1px;
}

li.follow.rssblueicon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/rss-logo-blue-28x28.png') no-repeat left 1px;
}

li.follow.skylineicon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/logo-skyline_only-28x28.png') no-repeat left 1px;
}

li.follow.twittericon {
  background: url('https://wdcb.stcwdc.org/wp-content/uploads/twitter-logo-28x28.png') no-repeat left 1px;
}

<div class="social-follow">
  <ul class="follow-background">
    <li class="follow facebookicon"><a href="https://www.facebook.com/STCWDCMB/" rel="nofollow noopener noreferrer">Facebook page</a></li>
    <li class="follow flickricon"><a href="https://www.flickr.com/photos/stcwdc/sets" rel="nofollow noopener noreferrer">Flickr Photo Albums</a></li>
    <li class="follow instaicon"><a href="https://www.instagram.com/stc_wdcb/" rel="nofollow noopener noreferrer">Instagram</a></li>
    <li class="follow linkedinicon"><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow noopener noreferrer">LinkedIn Group</a></li>
    <li class="follow pinteresticon"><a href="https://www.pinterest.com/stcwdcmb/" rel="nofollow noopener noreferrer">Pinterest page</a></li>
    <li class="follow twittericon"><a href="https://twitter.com/stcwdc" rel="nofollow noopener noreferrer">Twitter @stcwdc</a></li>
  </ul>
</div>

Opera、Firefox、Safari 和 Google Chrome 中的当前结果：

标签： cssbackground-imagebulletedlist

Answer 1

这里有几个问题，但首先要注意一个问题已经消失。问题中的图像显示了项目符号和图标，但问题中当前显示的代码不显示项目符号。我相信这是在评论中处理的（！重要的错字）。

现在还有一些剩余的东西。对除 0 以外的 line-height 进行无单位设置是不可行的（对于大多数情况而言，这可能是无单位的），因此此代码段应用了一个 px，它假定这是想要的。[请注意问题的片段中，这不会被拾取，因为它所在的类从未执行过，请参阅下一点。我相信有些浏览器可能是“善良的”并假设为 px，但不要依赖它]。

正如@connexo 所指出的，有一大块 CSS 从未应用过：

.social-follow ul.follow-background + li.follow {
  line-height: 32;
  background: no-repeat left 1px;
  /** fixed vertical position **/
  margin: 0.3em 0 0 -0.6em;
  padding: 0 0 0 2.7em;
  overflow: hidden;
}

见MDN：

相邻的兄弟组合符 (+) 分隔两个选择器，并且仅当第二个元素紧跟在第一个元素之后，并且它们都是同一个父元素的子元素时才匹配第二个元素。

li 元素是 ul 元素的子元素，而不是兄弟元素，因此该选择器被忽略。

然而，在解决这个问题时，我们发现了另一个问题 - 有一个比另一个更具体的背景设置。所以这个：

background: no-repeat left 1px;

现在覆盖这个：

  background: url('https://wdcb.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-32x32-28x28.png') no-repeat left 1px;

请记住，背景是一个复合属性 - 设置几件事情。

为清楚起见，此代码段将事物分成单独的组件。

.social-follow {
  margin: 0.2em 0 2em 3em;
}

.social-follow ul.follow-background {
  list-style: none outside !important;
  margin: 0 0 0 0.6em;
  padding: 0 0 0 0.6em;
  overflow: hidden;
}

.social-follow ul.follow-background li.follow {
  line-height: 32px;
  background-repeat: no-repeat;
  background-position: left 1px;
  /** fixed vertical position **/
  margin: 0.3em 0 0 -0.6em;
  padding: 0 0 0 2.7em;
  overflow: hidden;
}

li.follow.chapicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-32x32-28x28.png');
}

li.follow.facebookicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/facebook-icon-28x28.png');
}

li.follow.flickricon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/fluid-flickr-logo-28x28.png');
}

li.follow.instaicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/instagram-logo-28x28.png');
}

li.follow.linkedinicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/linkedin-logo-28x28.png');
}

li.follow.pinteresticon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/pinterest-logo-28x28.png');
}

li.follow.rssblueicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/rss-logo-blue-28x28.png');
}

li.follow.skylineicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/logo-skyline_only-28x28.png');
}

li.follow.twittericon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/twitter-logo-28x28.png');
}

<div class="social-follow">
  <ul class="follow-background">
    <li class="follow facebookicon"><a href="https://www.facebook.com/STCWDCMB/" rel="nofollow noopener noreferrer">Facebook page</a></li>
    <li class="follow flickricon"><a href="https://www.flickr.com/photos/stcwdc/sets" rel="nofollow noopener noreferrer">Flickr Photo Albums</a></li>
    <li class="follow instaicon"><a href="https://www.instagram.com/stc_wdcb/" rel="nofollow noopener noreferrer">Instagram</a></li>
    <li class="follow linkedinicon"><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow noopener noreferrer">LinkedIn Group</a></li>
    <li class="follow pinteresticon"><a href="https://www.pinterest.com/stcwdcmb/" rel="nofollow noopener noreferrer">Pinterest page</a></li>
    <li class="follow twittericon"><a href="https://twitter.com/stcwdc" rel="nofollow noopener noreferrer">Twitter @stcwdc</a></li>
  </ul>
</div>