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. algorithm之不变序列操作

    概述:不变序列算法,参见http://www.cplusplus.com/reference/algorithm/ /* std::for_each template <class InputI ...

  2. 如何做一个脚本自动打开IE浏览器

    打开记事本,输入start iexplore "http://www.baidu.com"这个是打开百度,如果只要打开IE就输入start iexplore然后另存为--保存类型改 ...

  3. Careercup - Microsoft面试题 - 5120588943196160

    2014-05-10 22:58 题目链接 原题: Three points are given A(x1, y1), B(x2, y2), C(x3, y3). Write a method ret ...

  4. android 开发Parcelable 怎么传值ArrayList

    public class TradeEntity implements Parcelable{ public String id; //有关进度条的参数 ArrayList<TradeState ...

  5. android 怎么动态设置button 的style

    网上找了很多,还是没有直接的解决办法,button没有setstyle这个方法.因此我的解决办法如下: 直接动态设置各个属性 Button themeBtn = new Button(this); t ...

  6. OOP-ECMAScript - 深入理解Javascript

    一.面向对象概论 x = {a: 10}; y = {b: 20}; y.Prototype = x z = {c: 30}; z.Prototype = y; z.a; x.a = 100; z.a ...

  7. java list中的对象，按对象某属性排序

    1:对象类 需要 实现: public class TreeNode extends BaseBean implements Comparable <TreeNode> { private ...

  8. 【转】EXT VTYPE自定义举例

    原文地址:http://www.blogjava.net/xiaohuzi2008/archive/2012/12/08/392676.html 近日来对Ext特别感兴趣,也许是它那种OO的设计思想吸 ...

  9. C#--简单的串口通信程序

    前几天做毕业设计,其中要用到串口和下位机进行通信,于是自己捣鼓了一个简单的串口通信程序. 在做通信之前要先弄一个SerialPort组件出来,当然也可以通过程序来创建.本次设计中采用的是拖的winfo ...

  10. JS 学习笔记--12---面向对象

    练习中使用的浏览器为IE10,如果各位朋友有不同意见或者本文有什么错误地方,望指正 ECMASCript有两种开发模式:函数式(面向过程)和面向对象.面向对象有一个很明显的标志,那就是类,我们可以通过 ...