【问题标题】:What is a pseudo element?什么是伪元素?
【发布时间】:2011-12-07 03:51:57
【问题描述】:

我正在剖析这个非常漂亮的例子,说明 CSS 如何帮助您在图像上创建漂亮的发光效果。

http://jsfiddle.net/necolas/KbNq7/

示例中的这一行提到:

虽然这种方法只会在 Firefox 4 中产生完整的效果, 其他浏览器最终会赶上并应用过渡到 伪元素

什么是伪元素?

【问题讨论】:

标签: html css pseudo-element


【解决方案1】:

伪元素是 CSS 选择器,它以特殊方式操纵元素的一部分。

它们包括:

  • :first-line
  • :before
  • :after

应用

伪元素是这样应用的

p:first-letter{
    color:black;
    font-style:italic;
}

注意:: 后跟选择器是 CSS1 和 CSS2 中伪元素的表示方式。在 CSS3 中,使用双冒号 (::) 将它们与伪类区分开来。

更多详情:http://reference.sitepoint.com/css/pseudoelements

支持

对许多浏览器的支持都不错,旧版本的 IE 的支持特别差。 QuirksMode 有一个兼容性表(有点过时但仍然有用):http://www.quirksmode.org/css/contents.html#t15

很酷的技巧

伪元素可以做一些很酷的事情,包括

  1. 在印刷文档中显示链接的 URL
  2. 伪造float:center;

在此处查看更多信息:http://css-tricks.com/9516-pseudo-element-roundup/

使用 jQuery

​​>

jQuery 有许多独特的 selectors 来增强和扩展原生 CSS 组:

http://api.jquery.com/category/selectors/

注意:您可以使用 jQuery 来强制旧版浏览器采用某些规则。例如,IE6 将忽略:last-child。使用 jQuery 可以强制 IE6 应用该样式。

规范

http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors

【讨论】:

  • 请注意,:hover 选择器也可以与其他元素一起使用。
  • :first-child 也是一个伪类,而不是一个伪元素——我已经为你编辑了它。顺便说一句,答案很好:)
【解决方案2】:

它不是 dom 中的元素。您可以使用选择器进行选择,尤其是在 : 之后。

http://www.htmldog.com/guides/cssadvanced/pseudoelements/

【讨论】:

    猜你喜欢
    • 2013-03-05
    • 1970-01-01
    • 2017-06-11
    • 2019-11-16
    • 2012-11-16
    • 2013-07-25
    • 2015-02-21
    • 2022-11-10
    • 2019-04-13
    相关资源
    最近更新 更多