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. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  2. Android Studio增加NDK代码编译支持--Mac环境

    Android的APP开发基本都是使用Java或者跨平台框架进行开发的,对于很多APP来说已经足够了,但是,对于提供功能给外部使用或者性能要求很高的需求下,如图像处理等,可能会需要C/C++库的支持, ...

  3. SQL优化技巧

    我们开发的大部分软件,其基本业务流程都是:采集数据→将数据存储到数据库中→根据业务需求查询相应数据→对数据进行处理→传给前台展示.对整个流程进行分析,可以发现软件大部分的操作时间消耗都花在了数据库相关 ...

  4. Linux 安装基于（PHP5.5）memcache扩展

    一. memcache服务器端 下载地址:http://memcached.org/ 安装memcached,同时需要安装中指定libevent的安装位置 tar zxvf memcached-1.2 ...

  5. FP-growth高效频繁项集发现

    FP-growth 算法优缺点: 优点:一般快于Apriori 缺点:实现比较困难,在某些数据上性能下降 适用数据类型:标称型数据 算法思想: FP-growth算法是用来解决频繁项集发现问题的,这个 ...

  6. 解决win7下PIL无法打开图片的问题

    找到PIL安装文件里的ImageShow.py 把第99行的 return "start /wait %s && del /f %s" % (file, file) ...

  7. python 线程之 threading(四）

    python 线程之 threading(三) http://www.cnblogs.com/someoneHan/p/6213100.html中对Event做了简单的介绍. 但是如果线程打算一遍一遍 ...

  8. DataTable.RowFilter 用法

    /// <summary> /// 处理DataRow筛选条件的特殊字符 /// </summary> /// <param name="rowFilter&q ...

  9. Only Link: Inheritance and the prototype chain

    Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_cha ...

  10. jQuery Live Query 插件

    http://www.cnblogs.com/sunjing/archive/2008/12/06/1349097.html 上篇日志里写到的那个问题其实有种更简单的解决办法,就是使用jquery的L ...