CSS3 伪类中content中的内容

来源:互联网 发布:wow70数据库 编辑:程序博客网 时间:2024/04/19 11:58

        content属性接受广泛的值,范围从简单的字符串到自动计数器引用。任意数目的这些值都用空格分割开,而且都包含在一个单独的content属性。浏览器可以链接这些值来形成一个单值,然后将它插入文档中。

        content值中最简单的值是用引号括起来的字符串。在字符串中可以不包含HTMl或XHTML标记。使用转义序列(escape sequence)可以生成特殊的文本(比喻如,“\A” 会生成一个换行)。

        CSS转义序列与HTMl/XHTML字符实体类似。字符实体是以“&”符号开始的,后面跟有字符的名称或十进制值(后者要使用“#”值后缀),将带有把斜杠(\)十六进制字符放在CSS字符串内容属性值的前面,从此可以创建同样的字符。序列“\A”与字符实体“&#010”是相同的。

        content属性还接受url值。URL是以样式而不是像HTMl这样的方式来表示的,它指向任何浏览器可接受的对象,其中包括文本、图像或声音文件等。例如,要在文档中的每个等号前面放上一个装饰符号,可以使用下列指令:

p.equation:before(content : url{"图片路径"})

请记住,对象不应该包含HTML/XHTML标记,因为浏览器会逐行把内容插入到文档中。

        content属性还支持根据上下文自动生成正确的而且是特定于某场所的引号。用open-quote和close-quote关键字就可以插入它们。这些关键了插入适当的引号,并分别增加或者减少。还可以使用no-open-quote和no-close-quote关键字,它们可以在不插入引号的情况下,增加或者减速少的深度。

        content属性一个非常聪明的特性是其能够让浏览器显示任何相关元素的属性值。attr值有一个单独的参数,它对应着属性的名称。如果该属性是为元素而定义的,其值就会插入到文档中。例如,为了图像之后显示图像的url,可以编写下列指令:

img:after{content:"{"attr(src)"}"}

        如果没有为元素指定属性,就不会插入内容,但是content属性(就像我们在上面的例子中包括进去的图括号)的其他值还是会被插入。

        content属性是最强大的特性之一是其能够创建编号列表。当使用content属性的open-quote和close-quote值插入引号时,你可以用quotes属性控制用于引号的实际字符。此属性的值是一对或者很多对字符串。第一对对文档中最外层的引用定义了开放和闭合的引号。下一对指定了下一层,等等。如果引号级别超出了提供的字符对,浏览器会用最外层的字符串对开始。请注意,当多数语言使用单个字符作为引号时,你可以将任何长度的字符串指字为引号。

        你还应该在所用语言的基础上指定替换的引号。可以使用“:lang”伪元素来将不同的引用属性与不同的语言关联起来。例如:

q:lang(en){quotes: “” “” “” “”} q:lang(no){quotes: "《" "》" "<" ">"}

这确保了英语和挪威语(Norwegian)文档都使用各自的引号。

0 0
原创粉丝点击