启用对CSS3 :: pseudoelement外部的支持

Question

我希望能够使用::outside伪元素,但显然没有主流浏览器支持它(基于我今天的测试).

是否有某种JS​​ polyfill启用此选择器？或者有一种很好的模拟技术吗？

Answer 1

你是对的:现有的浏览器都没有实现古老的CSS3 Generated and Replaced Content模块中的任何新功能,因此你将无法尝试提出的伪元素.事实上,他们计划重写模块本身,所以当前的工作草案应该被认为是放弃了,不幸的是,没有人知道这些提议的功能的命运.

无论如何,我也不知道任何JS polyfill可用于这些伪元素,所以你::outside在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;
}

jsFiddle预览

但是,有一些警告:

• 这在很大程度上取决于DOM; 根据具体情况,你将无法将某些元素包裹在其他元素周围.即使你可以,那些包装元素最终可能会干扰行为甚至是实际父元素的样式.

  例如,它会阻止您在以下情况下使用子选择器:

  article > p
  

  你想要jQuery.wrap()那些p元素,那么那些包装元素将打破article和之间的父子关系p.

• 该规范声明::outside伪元素,如::before和::after,应该从生成它们的元素继承样式.如果使用JavaScript/jQuery添加包装器,那些包装器将继承其父元素的样式,而不是它们包装的样式.polyfilling时,这从来就不是一个问题::before和::after,因为他们打算无论如何要插入的子元素,下面的继承规则正常.