eyk*_*nal 98 css pseudo-element
我无法理解CSS :after属性的行为.根据规范(这里和这里):
正如其名称所示,
:before和:after伪元素指定元素文档树内容之前和之后的内容位置.
这似乎没有限制哪些元素可以具有:after(或:before)属性.但是,它似乎只适用于特定的元素 ...... <p>有效,<img>无,有<input>,无效<table>.我可以测试更多,但重点是.请注意,这似乎在浏览器中非常一致.是什么决定一个物体是否可以接受一个:before和:after财产？
thi*_*dot 148
img并且input都是被替换的元素.
替换元素是其外观和尺寸由外部资源定义的任何元素.实例包括图像(
<img>标记),插件(<object>标签),和形式的元件(<button>,<textarea>,<input>,和<select>标签).所有其他元素类型可以称为非替换元素.
:before并且:after只适用于未替换的元素.
从规格:
注意.本规范不完全定义的相互作用
:before和:after与替换元素(如IMG在HTML).这将在未来的规范中更详细地定义.
使用span:before, span:after,DOM看起来像这样:
<span><before></before>Content of span<after></after></span>
显然,这是行不通的<img src="" />.
:before而:after不是需要为替换元素,和CSS规范工作,不指定他们将如何为他们工作,并替换元素的概念有些模糊.
CSS 2.1规范清楚地表明它们可以用于替换元素,只是说它没有"完全定义"如何.这涉及到被替换的元素应该具有其自己的视觉呈现的问题,其不受CSS控制,而伪元素应该向元素的内容添加某些内容.该规范补充说,这将在未来的规范中"更详细地"定义,但到目前为止还没有这样做.
浏览器供应商刚刚决定通过不为某些元素实现这些伪元素来避免问题.
目前尚不清楚"替换元素"的含义是什么,其含义似乎有所改变.它通常被解释为与空元素(具有EMPTY声明内容的元素,即不能包含任何内容的元素)相同,但CSS 2.1本身显示带有选择器的样本样式表br:before(尽管浏览器忽略了它,实现br了自己的办法).可以说,越来越多的元素已经进入CSS渲染的范围,至少部分是这样.例如,input在现代浏览器中,一个元素(包括其字体,颜色等)在很大程度上可以用CSS控制.
当前的浏览器(Firefox,IE,Chrome浏览器)似乎并不支持:after和:before伪元素比其他的元素hr.因为hr,IE和Chrome将生成的内容放在有边框内,这是实现的hr; 内容使盒子更高.Firefox将两个(!)伪元素的内容放在作为其实现的水平规则之后hr.这种变化说明了CSS 2.1中提到的各种"交互"问题.
通常声称这些伪元素不能用于空元素,因为它们的HTML定义不允许任何内容.这是一个类别错误.标记语言的语法规则不限制您在CSS中可以执行的操作
最后,:after与:before目前不可用于空元素(除略微为hr),但是这主要是由于实现和在未来可能改变.