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. c#去掉小数点后的无效0

    decimal d = 0.0500m; d.ToString("0.##")就出来了 也可以这样 string.Format("{0:0.##}",d000) ...

  2. cacti添加主机监控

    登入cacti后 主机-->添加-->填入信息.如下图所示 填好后点击右下角添加 添加完.左上角出现如下信息.说明被监控的服务器snmp工作正常. 然后咱们给这个主机添加图形. 当前主机模 ...

  3. 【Java EE 学习 17 上】【dbutils和回调函数】

    一.dbutils的核心就是回调函数,可以说如果没有回调函数的思想,dbutils是不可能被开发出来的. 对于dbutils中的QuryRunner类,向该类的query方法提供不同的参数,可以得到不 ...

  4. Word中一些问题解决

    word图片不显示或显示不全怎么办? http://jingyan.baidu.com/article/0f5fb099c5cb7a6d8334ea06.html

  5. 【CentOS】文件与目录管理

    一.文件与目录管理 0.cd--change directory cd -  返回上次的目录 cd ~ 返回到家目录 --对于root用户来说是/root,对于普通用户来说是/home/用户名 cd ...

  6. （转）Java集合框架：HashMap

    来源:朱小厮 链接:http://blog.csdn.net/u013256816/article/details/50912762 Java集合框架概述 Java集合框架无论是在工作.学习.面试中都 ...

  7. BZOJ 2844 albus就是要第一个出场 ——高斯消元 线性基

    [题目分析] 高斯消元求线性基. 题目本身不难,但是两种维护线性基的方法引起了我的思考. void gauss(){ k=n; F(i,1,n){ F(j,i+1,n) if (a[j]>a[i ...

  8. iOS 用xib自定义view控件 debug笔记

    1.在view不是很复杂的情况下,如果多次检查后依旧出现coding-compliant这种情况,干脆彻底删除这个xib重新新建一个xib来做一遍.(至今未明真相) 2.初始化xib中的view的大致 ...

  9. VBA: Cant find project or librar

    Appears OK to me but the error message " Cant find project or library." suggests it could ...

  10. 【原】iOS学习之极光推送

    一.极光推送工程端 1.下载SDK 极光推送是一个推送消息的第三方,SDK下载:https://www.jpush.cn/common/products 集成压缩包内容:包名为JPush-iOS-SD ...