CSS2-3常见的demo列子总结二
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS2-3常见的demo列子总结二相关的知识，希望对你有一定的参考价值。
分针网每日分享：CSS2-3常见的demo列子总结二
1. 学习使用 :before和 :after伪元素
伪元素 顾名思义 就是创建了一个虚假元素，并插入到目标元素之前或者之后。这两个伪类下特有的属性content，用于在css渲染中头部和尾部添加内容，伪元素必须与content结合来使用，否则毫无意义，但是添加的内容不会改变文档的内容，不会出现在DOM结构中，仅仅是对用户是可见的，但是对DOM结构是不可见的。比如如下代码：
<div class="example">example</div>
CSS代码如下：
.example:before{
content:"#";
}
.example:after{
content: "@";
}
在页面上被渲染成如下内容：
二：指定个别元素不进行插入
针对这个问题，content还有一个属性none，含义是不需要为该元素有任何内容；比如如下代码：
<div class="example">example</div>
<div class="example sample">example</div>
<div class="example">example</div>
首先我对所有example类名前面添加#号，后面添加@符合，然后我对包含sample类名的前面和后面不添加任何符合代码如下：
.example:before{
content:"#";
}
.example:after{
content: "@";
}
.sample:before{
content: none
}
.sample:after{
content: none
}
三：插入图像文件
我们不仅可以使用before或者after选择器的在前面或者后面插入文字外，我们还可以插入图像文件，插入图像文件时，需要使用url属性值来指定图像的路径，比如如下代码：
<div class="example">example</div>
<div class="example sample">example</div>
<div class="example">example</div>
CSS代码如下：
.example:before{content:url("https://img.alicdn.com/tps/TB1sb2HJVXXXXXAXpXXXXXXXXXX-120-55.png_120x120.jpg");}
.example:after{
content: "@";
}
效果如下：
可以看到，在前面插入了一个图片。
浏览器支持程度：firefox，chrome，safari，opera，IE8+等浏览器。
2. 使用content属性来插入项目编号
<元素>: before {content:counter(计算器名)}
并且需要在元素的样式中追加对元素的counter-increment属性的指定。
注意：计数器名可以任意写，但是counter-increment指定的名字要相同。
如下代码：
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
Css代码如下：
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;}
效果如下：
浏览器支持程度：ie8+,chorme,firefox等；
3. 在项目编号中追加文字；
html代码还是如上
css代码如下:
h1:before{content:"第"counter(mycounter)"章"".";}
h1{counter-increment:mycounter;}
效果如下：
我们还可以指定编号的样式，我想让颜色变为红色，字体大小为18px，如下代码：
h1:before{content:"第"counter(mycounter)"章"".";color:red;font-size:18px;}
h1{counter-increment:mycounter;}
效果如下：
指定编号种类
使用before选择器或者after选择器中的content属性，我们不仅可以追加数字编号，我们还可以追加字母编号或者罗马数字编号，如下方法指定：
content: counter(计算器名，编号种类)
比如指定大写字母编号时，使用”upper-alpha”属性，指定大写罗马字母时，使用”upper-roman”属性。
如下css代码：
h1:before{content:counter(mycounter,upper-alpha);color:red;font-size:36px;}
h1{counter-increment:mycounter;}
p:before{content:counter(longen,upper-roman);color:blue;font-size:36px;}
p{counter-increment:longen;}
效果如下：
编号嵌套：
可以在大编号中嵌套中编号，可以在中编号中嵌套小编号。如下代码：
<h1>我想解决单身问题</h1>
<h2>可惜我不帅...没有女孩喜欢我....</h2>
<h2>我想解决单身问题</h2>
<h1>可惜我不帅...没有女孩喜欢我....</h1>
<h2>我想解决单身问题</h2>
<h2>可惜我不帅...没有女孩喜欢我....</h2>
Css代码如下：
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;}
h2:before{content:counter(longen);}
h2{counter-increment:longen;margin-left:40px;}
效果如下：
在上面代码中，6个中标题的编号是连续的，如果要将第二个大标题里中标题重新开始编号的话，需要在大标题中使用counter-reset属性将中编号进行重置。如下代码：
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;counter-reset:longen;}
h2:before{content:counter(longen);}
h2{counter-increment:longen;margin-left:40px;}
如下效果：
我们再来看一个复杂一点的多层嵌入的demo，如下：
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
CSS代码如下：
h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;counter-reset:subcounter;}
h2:before{content:counter(mycounter) ‘-‘ counter(subcounter)‘.‘;}
h2{counter-increment:subcounter;counter-reset:subsubcounter;margin-left:40px;color:red;}
h3:before{content:counter(mycounter) ‘-‘ counter(subcounter) ‘-‘ counter(subsubcounter) ‘.‘;}
h3{counter-increment:subsubcounter;margin-left:40px;color:blue;}
效果如下：
在字符串两边添加嵌套文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加如：括号，单引号，双引号之类的嵌套文字符号，open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。
<h1>括号</h1>
<h2>双引号</h2>
<h3>单引号</h3>
Css代码：
h1:before{content:open-quote;}
h1:after{content:close-quote;}
h1{quotes:"(" ")"}
h2:before{content:open-quote;}
h2:after{content:close-quote;}
h2{quotes:"\"" "\""}
h3:before{content:open-quote;}
h3:after{content:close-quote;}
h3{quotes:‘\‘‘ ‘\‘‘}
截图如下：
其中双引号和单引号需要使用转义字符 “\”进行转义。
以上是关于CSS2-3常见的demo列子总结二的主要内容，如果未能解决你的问题，请参考以下文章