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

Posted 飞鱼0725

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用选择器在页面中插入内容相关的知识,希望对你有一定的参考价值。

在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:"\‘" "\""}

以上是关于使用选择器在页面中插入内容的主要内容,如果未能解决你的问题,请参考以下文章

没有找到选择器的节点,但选择器在 HTML 页面上

在 SwiftUI 中使用分段式选择器在两个页面之间滑动

:禁用选择器在Jquery Validate忽略子句中不起作用[重复]

Before和After用法小结

Jquery日期时间选择器在弹出窗口中不起作用

CSS 选择器在 Python Web Scrape 中没有按下任何东西