温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3怎么用选择器在页面中插入所需内容

发布时间:2022-03-08 11:07:52 来源:亿速云 阅读:142 作者:iii 栏目:web开发

这篇文章主要介绍“css3怎么用选择器在页面中插入所需内容”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3怎么用选择器在页面中插入所需内容”文章能帮助大家解决问题。

  1使用选择器来插入内容

  使用after或before选择器,在选择器的content属性中定义要插入的内容,当插入内容为文字的时候,必须要在插入文字的两旁加上单引号或者双引号。

  <styletype="text/css">

  h3:before{content:&lsquo;COLUMN&rsquo;;}

  </style>

  2指定个别元素不进行插入

  使用content属性的none属性值

  <styletype="text/css">

  h3.sample:before{content:none;}

  </style>

  3插入图像文件

  <styletype="text/css">

  h3:before{content:url(mark.png);}

  </style>

  4将alt属性的值作为图像的标题来显示

  在content属性中通过指定“attr(属性名)”的形式,可以将某个属性的属性值显示出来。

  img:after{

  content:attr(alt);

  display:block;

  text-align:center;

  }

  5使用content属性来插入项目编号

  (1)在多个标题前加上连续编号

  1、在content属性中使用counter属性值来针对多个项目追加连续编号

  <元素>:before{content:counter(计数器名);}(使用计数器来计算编号,计数器可任意命名)

  2、还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值值设定为before选择器或after选择器的counter属性值中所指定的计数器名。

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

  h2:before{content:counter(mycounter);}

  h2{counter-increment:mycounter;}//1、2、3.......

  (2)在项目编号中追加文字

  h2:before{content:&lsquo;第&rsquo;counter(mycounter)&lsquo;章&rsquo;;}//第1章大标题、第2章大标题.........

  (3)指定编号的种类

  1.用before选择器或after选择器的content属性,不仅可以追加数字编号,还可以追加字母编号或罗马数字编号。

  content:counter(计数器名,编号种类)

  2.可以使用list-style-type属性的值来指定编号的种类,如大写字母编号时,使用“upper-alpha”属性,指定大写罗马字母时用“upper-roman”属性。

  h2:before{content:counter(mycounter,upper-alpha)&lsquo;.&rsquo;;}//A.、B.、C.、

  (4)编号嵌套

  h2:before{content:counter(mycounter);}//1(1、2、3...)、2(1、2、3...)、........

  h2{counter-increment:mycounter;counter-reset:subcounter;}(将中编号进行重置)

  h3:before{content:counter(subcounter);}

  h3{counter-increment:subcounter;margin-left:40px}

  (5)中编号中嵌入大编号

  h3:before{content:counter(mycounter)&lsquo;-&rsquo;counter(subcounter)&lsquo;.&rsquo;;}//1-1、1-2

  (6)在字符串两边添加嵌套文字符号

  1、可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。

  2、open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。

  3、在元素的样式中使用quotes属性来指定使用什么嵌套文字符号

  h2:before{content:open-quote;}

  h2:after{content:close-quote;}

  h2{quotes:"("")"}//形如:(标题)

css3怎么用选择器在页面中插入所需内容

关于“css3怎么用选择器在页面中插入所需内容”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI