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: "@";
}
在页面上被渲染成如下内容:
#example@
二:指定个别元素不进行插入
针对这个问题,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: "@";
}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810060493928.png)
可以看到,在前面插入了一个图片。
浏览器支持程度: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;}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810061462598.png)
浏览器支持程度:ie8+,chorme,firefox等;
3. 在项目编号中追加文字;
HTML代码还是如上
css代码如下:
h1:before{content:"第"counter(mycounter)"章"".";}
h1{counter-increment:mycounter;}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810062410141.png)
我们还可以指定编号的样式,我想让颜色变为红色,字体大小为18px,如下代码:
h1:before{content:"第"counter(mycounter)"章"".";color:red;font-size:18px;}
h1{counter-increment:mycounter;}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810063464527.png)
指定编号种类
使用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;}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810065164313.png)
编号嵌套:
可以在大编号中嵌套中编号,可以在中编号中嵌套小编号。如下代码:
<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;}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810081749907.png)
在上面代码中,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;}
如下效果:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810075894622.png)
我们再来看一个复杂一点的多层嵌入的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;}
效果如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810074269939.png)
在字符串两边添加嵌套文字符号
可以使用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:'\'' '\''}
截图如下:
![](http://fenzhen2016.oss-cn-hangzhou.aliyuncs.com/editor/2017071810072762900.png)
其中双引号和单引号需要使用转义字符 “\”进行转义。