3

我正在使用我正在使用的网站上挖掘一些旧代码iconize。它似乎工作的方式是添加这样的类......

a[href=$='.pdf']{
    padding: 5px 20px 5px 0;
    background: transparent url('icon.gif') no-repeat center right;
}

这样做比我这样做有什么好处吗？像这样的东西...

a[href=$='.pdf']:after{
    content: url('icon.gif');
    vertical-align: sub;
}

这是一个演示它们的小提琴......

JSFiddle

我的问题是......使用伪元素与标准填充和背景定位将图像附加/附加到元素有什么好处（如果有的话）？

4

2 回答 2

7

只是一些最初和后来的想法。我可能还想再补充一些。

填充/背景

好处）：

  1. 适用于 IE6-7（即旧版浏览器）。
  2. 如果想要将图标与文本重叠，特别是如果 centered，这将更容易实现。

缺点：

  1. 实施需要更多的思考（必须计算一些因素）。
  2. 对于较旧的浏览器，仅支持一种背景，因此如果需要另一种背景，则需要解决冲突。
  3. 如果浏览器设置为不打印背景图像，则打印文本中仍将存在填充的“间隙”，但不会存在图像。这可以通过印刷媒体 css 解决。

伪元素

好处）：

  1. 更容易实现（无需计算）。
  2. 如果需要，它可以有自己的padding, border,opacity等应用，就好像它是一个真实的元素一样。
  3. 与 #2 相关，如果需要或需要，它实际上可以移动到元素之外。
  4. 从语义上讲，它正在以更合适的方式实施。图标并不是真正的“背景”，但它也不是内容img可能是 html 的重要组成部分，因此伪元素适合增强演示文稿的功能，但如果丢失也不会引起问题（在较旧的浏览器）。
  5. 在 CSS3 浏览器（可能还有 CSS2）中，通常可以使用更少的代码在右对齐或左对齐图标之间切换（参见下面的“关于代码长度的讨论”）。

缺点：

  1. 每个元素只允许一个（每种类型），所以如果元素上的其他东西需要它，那么你可能会发生冲突。
  2. 旧浏览器不支持。
  3. 某些元素（替换元素）不能采用伪元素，因此这甚至不是一个选项。

关于代码长度的讨论

EHLOVader在对该问题的评论中指出，他的部分担忧是伪元素可能需要额外的编码，而不是如果想要切换到左侧图标的背景/填充。他给出了这个 codepen 的例子。但是，可以用更少的代码来做一个伪元素。假设.iconleft是一个用于将图标放在左边而不是右边.iconit的类，以及完全设置图标的类，那么下面的代码简洁地使得使用选择器的 CSS3 浏览器:not()发生这种情况（这里是小提琴，使用的原始.pseudo类OP用于图标）：

.iconit:not(.iconleft):after,
.iconit.iconleft:before {
    content: url('http://www.jasonapollovoss.com/web/wp-content/uploads/2010/09/pdf_icon_small.png');
    vertical-align: sub;
}

如果一个类用于显式地将图标设置在右侧或左侧（那时不需要类） ，CSS2 浏览器也可以这样做：iconrighticonlefticonit

.iconright:after,
.iconleft:before {
    content: url('http://www.jasonapollovoss.com/web/wp-content/uploads/2010/09/pdf_icon_small.png');
    vertical-align: sub;
}
于 2013-03-22T16:11:10.920 回答
0

使伪类如此有用的原因在于它们允许您动态设置内容样式。在上面的示例中，我们能够描述用户与链接交互时链接的样式。正如我们将看到的，新的伪类允许我们根据内容在文档中的位置或其状态来动态设置内容样式 阅读更多http://coding.smashingmagazine.com/2011/03/30/how-to-use -css3-伪类/

于 2013-06-03T09:49:18.480 回答