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. excel删除重复数据

    1.点击任意单元格2.选择菜单栏的数据-->删除重复项 -->自定义重复

  2. 【康拓展开】及其在求全排列第k个数中的应用

    题目:给出n个互不相同的字符, 并给定它们的相对大小顺序,这样n个字符的所有排列也会有一个顺序. 现在任给一个排列,求出在它后面的第i个排列.这是一个典型的康拓展开应用,首先我们先阐述一下什么是康拓展 ...

  3. 【Mybatis架构】输入、输出映射

    前言综述:   其实在我们分析Mybatis的查询缓存或者是一些简介的时候,我们就不难看到有关于Mybatis输入输出映射的东西,比如说: 但是一直没有想起来系统的来总结一下这方面的相关知识,偶然看到 ...

  4. ListView列表的简单案例

    在android开发中ListView它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子 列表示例图: BaseActivity pa ...

  5. js的回调函数 一些例子

    这边用bootstrap 3.0的  上传控件做例子 下面是上传控件的一段完整的 js 操作 代码. <!-- 上传缩略图控件配置 --><script> // 定义这四个全局 ...

  6. git stash和git stash pop

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

  7. [深入浅出WP8.1(Runtime)]Windows Phone 8.1和Silverlight 8.1的区别

    1.2.2 Windows Phone 8.1应用程序模型 Windows Phone 8.1支持多种开发语言来开发应用程序,包括C#.VB.JavaScript和C++,那么本书的代码主要是采用C# ...

  8. Django分析之导出为PDF文件

    最近在公司一直忙着做exe安装包,以及为程序添加新功能,好久没有继续来写关于Django的东西了….难得这个周末清闲,来了解了解Django的一些小功能也是极好的了~ 那今天就来看看在Django的视 ...

  9. phpcmsv9自定义sql语句查询模型实现

    在phpcmsv9中,自定义sql语句查询可不太好实现,传入sql语句查询很容易被内部转入生成一系列莫名其妙的sql语句,比如最佳前缀等等,直接造成sql语句查询错误,在此也提供两种解决办法,1修改底 ...

  10. *HDU3635 并查集

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...