在CSS3开发中,常见的伪元素选择器主要有4种,下面就和大家一起来扒一扒。
first-line伪元素选择器
我们在这个后面接着来写,我们写一个段落
<p>
在CSS中,主要有四个伪元素选择器<br/>
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
我们所说的这个first-line,这个选择器是需要向某个元素中的第一行文字使用样式。因为这个br它是换行,也就是说我们使用first-line的话它会,对我们第一行文字进行一个样式,我们来看一下对不对
p:first-line{
color: #f60;
}
第一行我们给它一个橙色
第一行元素p的第一行文字,给它一个橙色,这就是我first-line的使用方法。
first-letter伪元素选择器
就拿我们这里的来测试,我们这样来
p:first-letter{
color: green;
font-size: 24px;
}
第一个文字我们给它一个绿色,然后呢给它加一个字体,我们看一下。
每一个元素中的第一个字我们都设为了绿色,这个字呢还很大很大。
after伪元素选择器
我们在这里新建一个ul在这个ul里面呢有这个很多的链接。
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
我们在这个链接之前给它加入一个符号,我们看一下怎样来实现。那么在加入之前我们先来看一下是什么样的一个样式。
设这样的一个样式,那么我们来给它这样来,它默认的这个例的话是有有一个前面有这个圆点。那么我们把它给去掉。那么怎样去掉,在这里。
li{
list-style: none;
}
这个方法来将它去掉。
这样就将默认的圆点给去掉了,然后我们在这个例之前呢给它加一个圆点,通过这个元素之前的方法给它一个追加,追加之前呢它一个小圆点。
li:before{
content:"...";
color: red;
}
我们来测试一下。在前面就有这个小点点了,那么我们加一个小圆点?
它就有很多个小圆点,这就是在前面追加的方式。我们来看在后面追加的方式。
li:after{
content: "__after追加";
color: #ff6600;
}
before伪元素选择器
在每个 <p> 元素的内容之前插入新内容:
p:before
{
content:"内容:";
}
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。