Seb*_*n K 1 html css css-selectors pseudo-element
当我遇到一个奇怪的情况时,我正在玩CSS选择器.
如果我使用:first-child伪元素我需要在它前面加上一个空间让它工作,如果我不这样做就行不通.但是:第一个字母的伪元素情况是反向的,只有当它没有被空格前置时它才会起作用.
我觉得它很不一致,因为它们都是伪元素.最初我认为它可能只是IE10问题,但我检查了Chrome和Firefox,结果相同.有什么我想念的吗？这种行为有原因吗？
这里是重现问题的紧凑型样本:
<!DOCTYPE html>
<html>
<head>
<style>
* { color: red; }
#article1 :first-child { color: deepskyblue; }
article :last-child { color: darkmagenta; }
#firstLetter:first-letter { color: darkslateblue; }
#firstLine:first-line { color: darkslateblue; }
</style>
</head>
<body>
<article id="article1">
<div>E :first-child </div>
<div>E :last-child </div>
</article>
<div id="firstLetter">:first-letter</div>
<div id="firstLine">:first-line</div>
</body>
</html>
你的困惑来自于事实,:first-child并:last-child有伪类,而不是伪元素.它们中的每一个分别表示其父项的第一个和最后一个子项,但是您附加它们的元素表示子项,而不是父项.伪类是对某个元素的描述,如果您愿意,就像ID选择器描述具有该ID的元素或属性选择器描述具有该属性的元素一样.因此,选择器E:first-child意味着E它是其父级的第一个子级 - 无论父级是什么 - 而不是父级的第一个子级 E.
选择器#article1:first-child应该匹配#article1,因为它的第一个孩子body,但它不会匹配的div是第一个孩子的 #article1.#article1 :first-child匹配div因为,它是第一个父母碰巧的孩子#article1.
在另一方面,:first-letter和:first-line工作,因为它们匹配的第一个字母和第一线的分别为每个元素.这就是伪元素的含义; 即作为一个部件生成的虚拟元件(在DOM未示出)的一些其它元件.
请注意,这并不意味着您可以或不可以将空间与其中一个一起使用.您可以将任何组合子与任何伪类或伪元素选择器一起使用,或将其附加到另一个简单选择器链.当使用或不使用组合器时,它们只是意味着不同的东西,这就是为什么你会看到不同的结果.
可以在此处找到伪类与伪元素的另一种解释.
如果您不需要支持IE8及更早版本,则应使用双冒号表示伪元素,以帮助您将它们与伪类区分开来,::first-letter而::first-line不是:first-letter和:first-line.这种表示法在新的Selectors模块中引入.
| 归档时间： |
|
| 查看次数： |
315 次 |
| 最近记录： |