分针网
CSS2-3常见的demo列子总结二
黄秀琪 2017-07-14 11:49:29
阅读 5 点赞   阅读 写了86文章
前端开发

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: "@";
}

效果如下:

可以看到,在前面插入了一个图片。

浏览器支持程度: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:'\'' '\''}

截图如下:

其中双引号和单引号需要使用转义字符 “\”进行转义。


原文链接:http://www.cnblogs.com/tugenhua0707/p/4883999.html#_labelTop
©著作权归作者所有
18650135259
客服微信