1. :first-line

向元素的首行文本添加样式，不必关心首行是元素节点还是文本节点

<style>
        body,htm,div,p{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100x;
            background-color:#FC9;
        }
        p{
            height:50px;
            text-align:center;
            line-height:50px;
        }
        div > p:first-child{
            background-color:#F90
        }
        div > p:last-child{
            background-color:#6CC
        }
        div:first-line{
            color:red;
            background-color:green;
            /*这段设置无效
            display:block;
            width:100px;
            height:100px;*/
        }
</style>

<div>
         <p>p1</p>
         <p>p2</p>
 </div> 

:first-line伪元素相当于给文本添加了span元素<p><span>p1</span></p>，而且CSS代码中设置display:block是无效的

<style>
        body,htm,div,p{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100x;
            background-color:#FC9;
        }
        p{
            height:50px;
            text-align:center;
            line-height:50px;
        }
        div > p:first-child{
            background-color:#F90
        }
        div > p:last-child{
            background-color:#6CC
        }
        div:first-line{
            color:red;
            background-color:green;
            /*这段设置无效
            display:block;
            width:100px;
            height:100px;*/
        }
</style>

<div>
        This is first line
        <p>p1</p>
        <p>p2</p>
 </div>

由于文本超过div的宽度，换行后，只有第一行有效果

 2. :first-letter

向文本的第一个字母添加特殊样式

<style>
div:first-letter{
    color:red;
}
</style>

<div>
        This is first line
        <p>p1</p>
        <p>p2</p>
</div>

默认的display:inline,但是:first-letter不能通过display:block来改变显示方式

3. :before 表示在元素的内容之前新插入内容

   :after 表示在元素的内容之后新插入内容

多个内容以空格分隔 content:"hahah" attr(class) url(images/15.gif);

3.1 插入图片

<style>
    div:before{
          content:url(images/15.gif);
          border:10px solid red;
    }
    span{
        border:10px solid green;
    }
</style>

<div>
    <span>This is first line</span>
        <p>p1</p>
        <p>p2</p>
</div>

:after默认插入的元素是inline属性的，通过修改display:block来改成块级元素

<style>
        div:before{
            content:url(images/15.gif);
            border:10px solid red;
            display:block;
            width:100px;
            height:50px;
        }
        span{
            border:10px solid green;
        }
</style>

<div>
    <span>This is first line</span>
        <p>p1</p>
        <p>p2</p>
</div>

3.2 插入文本

<style>
        div{
            width:300px;
            height:300px;
            background-color:#FC9;
            text-align:center;
        }

        div:hover:after{
            content:"This is after";
            background-color:green;
            width:100px;
            height:100px;
            display:block;
            margin:0 auto;
        }
</style>

鼠标移动到div上时:

3.3 插入特殊图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .phoneNumber:before{
            content:"\260E";
            font-size:15px;
        }
    </style>
</head>
<body>
    <p class="phoneNumber">13021020<span>&#9742</span>394</p>
</body>
</html>

3.4 通过attr()调用当前元素的属性(参数不是字符串)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            color:red;
            font-size:1.5em;
        }
        div:after{
            content:attr(id);　　　　　　　color:yellow;　　　　 }
    </style>
</head>
<body>
    <div id='myDiv' style="width:100px;height:100px;background-color:cyan">DIV<br/></div>
</body>
</html>

CSS之伪元素的更多相关文章

  1. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  2. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  3. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  4. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  5. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  6. 笑谈CSS的伪元素

    今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...

  7. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  8. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  9. CSS 的伪元素是什么？

    CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...

  10. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. Android adapter适配器的学习

    学习Android有一点时间,说说自己的学习感悟. 首先呢,先说说适配器的作用,顾名思义,它就是把数据定义好一定的规则,使得我们可以用到ListView GridView等上面 所以说这玩意,还是得好 ...

  2. 微信分享ios设备没有分享图标安卓有分享图标 （分享功能没有问题）

    解决方案:去除 var sharedata = { title: $("#shareTitle").val(), desc: $("#shareContent" ...

  3. Ubuntu下三个实用的录屏软件

    Ubuntu下三个实用的录屏软件 Kazam 优点: 易安装 可选择区域录制,也可全屏录制 有录屏和截图功能 安装: sudo apt-get install kazam 展示: Simple Scr ...

  4. PHP【函数】

    目录:[PHP函数].[PHP数组] 一.PHP常用函数(和JS一样)函数的四要素:①返回类型②函数名③参数类型④函数体因为PHP是弱类型语言,所以可以不用写返回类型,但是其他三个要素都是必须要写的. ...

  5. linux安装open block chain

    Compile the source code Step 1. 安装git sudo apt-get install git Step 2. 安装vagrant(ubuntu系统) 下载地址https ...

  6. /var/run/yum.pid 已被锁定，PID 为 XXXX 的另一个程序正在运行。

    安装st-load时, 终端提示 “/var/run/yum.pid 已被锁定,PID 为 13908 的另一个程序正在运行.” 解决方法:直接在终端运行 rm -f /var/run/yum.pid ...

  7. android 得到缩略图

    转载至 http://blog.csdn.net/dxh040431104/article/details/6667448 怎样获取图片的大小?思路很简单:首先我们把这个图片转成Bitmap,然后再利 ...

  8. Android_AsyncTask异步任务(一)

    AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的结果给UI ...

  9. jquery 使用需要注意

    jquery选择器,层选择器等多个选择器,jquery生成对象,jquery遍历对象, jquery ajax调用不要进行方法封装返回值方式调用,会取不到值. jquery使用要注意很多细节点才能将其 ...

  10. git stash和git stash pop

    git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码, 又不想加新commit, 或者另外一种情况,为了fix 一个紧急的bug,  先stash, 使返回到自己上一个comm ...