网络学院 w3pop社区 网络资源 IT新闻

w3pop.com :: 网络学院 :: CSS :: CSS 伪元素

会员登陆

帐号

密码

回答

记住密码

忘记密码? 注册

CSS
CSS2 Aural
CSS 单位
CSS 颜色
CSS 颜色值
CSS 颜色名称
CSS 编码与组织技..
CSS 模块化设计思..
CSS完美兼容IE6/I..
CSS @ Ten: 下一�..

No. « ‹ 1 2

CSS 伪元素

作者:w3pop.com 翻译/整理:w3pop.com 发布:2007-04-28 浏览:5459 :: ::

CSS pseudo-elements are used to add special effects to some selectors.
CSS的伪元素可用来给一些选择器加上特殊的效果。

实例

Make the first letter special
This example demonstrates how to add a special effect to the first letter of a text.
如何给文字的首个字加上特殊效果

Make the first line special
This example demonstrates how to add a special effect to the first line of a text.
如何给文字的第一行加上特殊效果

语法

The syntax of pseudo-elements:
伪元素的语法为：

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:
CSS类也可以使用伪元素:

selector.class:pseudo-element {property: value}

The :first-line Pseudo-element
:first-line伪元素

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:
一般这个伪元素使用在为文字首行添加特殊样式上：

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
<p>Some text that ends up on two or more lines</p>

The output could be something like this:
输出的样子就是这样：

Some text that ends
up on two or more lines

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window.
上面的例子中浏览器就会依据"first-line"伪元素将第一行格式化，浏览器的分行是根据它的窗口大小来定的。

Note: The "first-line" pseudo-element can only be used with block-level elements.
注意："first-line"伪元素只可以通过block-level元素来使用

Note: The following properties apply to the "first-line" pseudo-element: 
以下属性适用"first-line"伪元素：

  • font 属性
  • color 属性
  • background 属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The :first-letter Pseudo-element
:first-letter伪元素

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:
这个伪元素用在要为文字的第一字母添加特殊样式的时候：

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
<p>The first words of an article.</p>

The output could be something like this:
输出就成这个样子：

___
  |  he first 
  |  words of an
article.

Note: The "first-letter" pseudo-element can only be used with block-level elements.
注意：和"first-line"伪属性一样，"first-letter"也只有通过block-level元素才能使用

Note: The following properties apply to the "first-letter" pseudo- element: 
注意：以下属性适用于 "first-letter"伪元素：

  • font 属性
  • color 属性
  • background 属性
  • margin 属性
  • padding 属性
  • border 属性
  • text-decoration
  • vertical-align (only if 'float' is 'none')
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elements and CSS Classes
伪元素和CSS类

Pseudo-elements can be combined with CSS classes: 
伪元素可以和CSS类混合使用：

p.article:first-letter {color: #FF0000}
<p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with class="article" red.
以上的例子会让所有class="article"的段落首字母为红色。

Multiple Pseudo-elements
多重伪元素

Several pseudo-elements can be combined:
几个伪元素可以混合使用: 

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}
<p>The first words of an article</p>

The output could be something like this:
输出就成这样：

___
  |  he first 
  |  words of an
article.

In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color.
上面的例子段落的首个字母会成为大小为24pt的红色字体，余下首行的部分会变为兰色，再余下的就是默认的颜色了。

CSS2 - The :before Pseudo-element
CSS2中的:before伪元素

The ":before" pseudo-element can be used to insert some content before an element.
":before"伪元素可以用来在一元素前插入一些内容

The style below will play a sound before each occurrence of a header one element.
下面的样式就会在每个标题元素前播放一段声音

h1:before
{
content: url(beep.wav)
}

CSS2 - The :after Pseudo-element
CSS2中的:after 伪元素

The ":after" pseudo-element can be used to insert some content after an element.
":after"伪元素用在给一元素后插入一些内容

The style below will play a sound after each occurrence of a header one element.
下面的样式就会在每个标题元素后播放一段声音

h1:after
{
content: url(beep.wav)
}

Pseudo-elements
伪元素

支持的浏览器: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C：下表中“W3C”纵栏中的数字指明了支持该属性的CSS版本（CSS1或CSS2）。

伪元素 意图 IE F N W3C
:first-letter Adds special style to the first letter of a text
设置文字第一个字符的样式		 5 1 8 1
:first-line Adds special style to the first line of a text
为文字的第一行加上特殊样式		 5 1 8 1
:before Inserts some content before an element
在元素前插入一些内容		   1.5 8 2
:after Inserts some content after an element
在元素后插入一些内容		   1.5 8 2

评论 (1) 1 All