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

Question

这个 CSS 曾经使用社交媒体图标替换列表项项目符号，但现在它给我一个列表，显示项目符号、图标和文本混合在一起。

为什么有“list-style: none;”停止工作了？

.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 中的当前结果：

Answer 1

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

现在还有一些剩余的东西。将 line-height 设置为 0 以外的无单位设置是不可行的（对于大多数情况来说可以是无单位的），因此此代码段应用了一个 px，它假定它是需要的。 [注意在问题的片段中，这不会被拾取，因为它所在的 class 从未执行过，请参阅下一点。我相信某些浏览器可能是 'kind' 并假设 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：

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

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>

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

Why did my CSS for replacing a list item bullet with a background icon stop working?

css

background-image

bulletedlist