使用选择器在页面中插入内容

Posted 2020-11-10 飞鱼0725

在CSS中使用before与after伪元素选择器在页面元素的前面或后面插入内容，而插入的内容是用content属性来定义的。确切的说这两个伪元素只在css 2.0中添加的，但是直到css3都在不断的改良和扩展。

插入文本内容

1、使用选择器来插入内容的方法，div:before{content:‘内容‘}

2、指定个别元素不进行插入，div:before{content:none}

插入图像文件

1、在标题前插入图像文件，需要使用url属性值来指定图像文件的路径，例如：div:before{content:url(logo.jpg)}

2、插入图像文件的好处，虽然可以利用img元素在页面中追加图像文件，但是也可以使用样式表来追加图像文件，这样做可以为页面编写节省大量的时间。当然这里还有在样式表里追加图像文件的方法，就是把他作为元素的背景图像文件来追加。但是在打印的时候，如果设定为不打印背景的话，使用before选择器追加的图像文件可以正常打印，但是使用背景图追加的方式追加的图像文件就不能正常打印了。

3、将属性的值作为图像的标题来显示，如果在content属性中使用“attr（属性名)”这中形式来指定attr属性值，那么可以把某个属性的属性值显示出来。例如：content:attr(alt)

插入项目符号

1、在多个标题前加上连续符号

使用方法：<元素>:before{ content:counter(计数器名)}

               <元素>{ counter-increment:before选择器或after选择器中指定的计数器名}

2、在项目符号中追加文字，例如：div:before{content:‘第‘ counter（计数器名) ‘章‘}

3、指定编号的种类，例如：content:counter(计数器名,编号种类)

4、编号嵌套

5、在字符串两边添加嵌套文字符号，使用content属性的open-quote和close-quote属性值在字符串两边添加诸如括号、单引号、双引号等，注意当添加双引号是要使用“\”转义字符，如div{quotes:"\‘" "\""}