在CSS中，第一个字母和第一个字母有什么区别？

通过一些测试准备跑，有人问我，这是否会正确设置的第一个字母的颜色：在CSS中，第一个字母和第一个字母有什么区别？

td.one::first-letter { 
    color:blue; 
}

现在，我知道我在哪里见过结肠翻倍式的地方，但测试的jsfiddle并不表明和

td.two:first-letter { 
    color:green; 
}

所以之间的行为有什么区别，我只是好奇的区别是什么，以及为什么你会用::代替：在伪类的前面？

http://jsfiddle.net/mori57/bqE7Q/

来源

2013-04-29 Jason M. Batchelor

在我的防守，你知道它是多么难以得到之间有着明显的搜索结果：和::在谷歌？ :)但是，我会带走我的肿块，需要努力锻炼我的耐力！感谢您的意见！ – 2013-04-29 17:23:50

他们在这种情况下相当，但仅仅是因为它是一个伪元素，而不是一个伪类。创建双冒号语法是为了防止调用单冒号伪元素“伪类”（您的问题足以奇怪地说明）引起的混淆。从spec：

这::符号被当前文档以建立伪类和伪元素之间的鉴别介绍。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2（即，:first-line,:first-letter,:before和和:after）中引入的伪元素的前面的一个冒号符号。本规范中引入的新伪元素不允许这种兼容性。

如果您不打算支持IE < 9，最好是将所有伪元素都用双冒号表示。如果您需要支持较旧版本的IE，则可以继续使用单个冒号，但仅限于上述选择器。

来源

2013-04-29 17:04:38 BoltClock

在我问这个问题之前，我没有想过伪元素和伪类之间的区别。非常感谢您在规范的特定部分以及附加信息中滚动。 – 2013-04-29 17:18:13

因此，使用':: first-letter'会引用一个伪元素，而'：hover'则表示一个伪类？刚刚发现了这两者之间差异的有趣解释，对于其他人感到困惑（因为我是）关于差异：http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html – 2013-04-29 17:22:27

是的， '：hover'是少数[UI状态伪类]之一（http://www.w3.org/TR/selectors/#UIstates） – Adrift 2013-04-29 17:23:17

检查规格？

这个:: notation是由当前文档引入的，以便建立伪类和伪元素之间的区分。为了与现有样式表兼容，用户代理还必须接受前面的一个冒号符号，用于在CSS级别1和2中引入的伪元素（即：first-line，：first-letter，before和：后）。本规范中引入的新伪元素不允许这种兼容性。

http://www.w3.org/TR/selectors/#pseudo-elements

来源

2013-04-29 17:04:57

我一定是在看规格中的错误页面......我在文档上搜索::并没有看到这个！但是，再次，我的眼睛有时看着这些，开始有点釉，所以谢谢指出相关的一点！只要SO让我回答，就会标记你的答案。 :) – 2013-04-29 17:11:55

不用担心，但你应该接受其他人的回答，例如BoltClock's。他给出了更多的解释，我只是与规范联系在一起。 – 2013-04-29 17:13:11

够公平的。你是我读过的第一本，这段代码很清楚，尽管它当然没有详细说明IE的问题。无论如何，我只是倾向于自然地认为我需要查看caniuse.com以获得更专业的选择器。再次感谢！ – 2013-04-29 17:14:57

在CSS中，第一个字母和第一个字母有什么区别？

回答

相关问题