first-line   设置首行样式

first-letter 设置首字母样式

before  在某元素前插入内容并设置内容样式

after 在某元素后插入内容并设置内容样式

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

   <style>

      p:first-line{background: #CCFFCC;}

       p:first-letter{color:red;}

       p:before{ content: "前";}

       p:after{content: "后";font-size: 50px;}

   </style>

</head>

<body>

实例:

<p>第一行 <br />第二行</p>

</body>

</html>

CSS3伪类选择器的更多相关文章

  1. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  2. jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  3. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  4. CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）

    nth-child(odd):奇数 nth-child(even):偶数 使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算. 比如: <li>< ...

  5. CSS3 伪类选择器 :nth-child()

    :nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0 ...

  6. CSS3伪类选择器 图示

         

  7. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  8. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  9. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

随机推荐

  1. cocos中使用VS自动创建工程的方法

    为了省事,直接用VS编写了一小段代码,将cocos手动创建工程的命令改用system来执行,免去了手动输入命令的麻烦 其中: -d F:\\cocos2d-x-3.2-projects 是你要存放的工 ...

  2. Android -- Webview自适应屏幕

    第一种                                                                                          WebSett ...

  3. Android -- PowerManager和PowerManager.WakeLock

    PowerManager.WakeLock                                                       PowerManager.WakerLock是我 ...

  4. 尝试用Uplodify

    尝试用Uplodify     Uplodify官方 前台index代码: @{ Layout = null; } <script src="~/Scripts/jquery-1.8. ...

  5. HDU 5647 DZY Loves Connecting 树形dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5647 题解: 令dp[u][0]表示u所在的子树中所有的包含i的集合数,设u的儿子为vi,则易知dp ...

  6. 【BZOJ】【2661】【Beijing WC2012】连连看

    网络流/费用流/二分图最大权匹配 拆点费用流求最大权匹配……为什么我拿zyf和Hzwer的代码也交不过去……WA了那么多次……so sad 求路过的神牛指导啊>_<万分感谢 //BZOJ ...

  7. if-else的优化举例

    共有部分: String bookFrom = null; String sheetFrom = null; String bookTo = null; String sheetTo = null; ...

  8. 第一个 bat 文件

    要写一个批处理命令 转换场景数据 包括从文件里读入 每一行信息是一个要转换的场景名字 可以拼出路径 到指定路径 执行命令 http://blog.csdn.net/mfx1986/article/de ...

  9. protobuf的安装和使用

    以下全部基于win7系统. protobuf是什么,有什么用网上说的已经很多了.这里就是说一下怎么使用.就当给自己做个笔记吧. .proto文件的语法什么的也请网上查看,挺多的. 第一步: 下载pro ...

  10. 图片放大镜插件 Cloud Zoom v3.1

    Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom.相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性. 猛击这里查看演示DEM ...