我想要使用::外部的伪元素,但显然没有一个主要的浏览器支持它(根据我今天的测试).
是否有某种JS polyfill可以启用此选择器？还是有一个很好的技术来模拟这个？
解决方法
你是正确的：没有任何浏览器已经实现了古代
CSS3 Generated and Replaced Content module中的任何新功能,所以你将无法尝试所提出的伪元素.实际上,他们正在计划重写模块本身,所以目前的工作草案应该被放弃,不幸的是没有告诉这些提出的功能的命运.
无论如何,我也不知道这些伪元素可用的任何JS polyfills,所以你在使用CSS外部的选择器编写选择器是不幸的.
你可以得到的最接近的是围绕你想要容纳一个容器的元素围绕实际元素…这是很便宜的,例如,jQuery的.wrap()或.wrapAll().
所以,而不是这样做：
p::outside {
display: block;
border: 3px solid #00f;
}
你会这样做：
$('p').wrap('<div class="outside-p" />');
/*
* Notice that you can't select only .outside-p that contains p:only-child,* so you'll have to come up with esoteric class names.
*/
.outside-p {
border: 3px solid #00f;
}
但是有一些注意事项：
>这很大程度上取决于DOM;根据情况,您将无法围绕其他元素进行包装.即使可以,这些包装元素可能会最终干扰实际的父元素的行为甚至造型.
例如,它阻止您在以下情况下使用子选择器：
article > p
在那里你打算jQuery.wrap()这些p元素,那么那些包装器元素会破坏文章和p之间的父子关系.>规范说明::外部伪元素,如:: before和:: after,应该从生成它们的元素继承样式.如果您使用JavaScript / jQuery来添加包装器,那么这些包装器将继承自父元素的样式,而不是它们包装的样式.这在polyfilling :: before和:: after之前从来没有成为问题,因为它们旨在作为子元素插入,遵循继承规则.
