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. 思维认知-读mindhacks杂记

    1. 导语 无意中浏览知乎,搜索到了mindhacks.cn这个个人geek的网址.mindhacks博主本人是牛人程序员一枚,但他的博客主题涵盖的主要内容确是思维改变生活. 博客链接地址:http: ...

  2. Leetcode Variant-Plus N

    Given a non-negative number represented as an array of digits, plus N to the number. The digits are ...

  3. 电梯调度--c++--软件工程

    一.设计思路 (1)将乘客要去的楼层数存起来. (2)假设yi为乘客要爬楼层数之和,yi=n1*|(n1-ni)|+n2*|(n2-ni)|+..+n18*|(n18-ni)| (3)比较y1到y18 ...

  4. saltstack知识点

    1.salt '*' sys.doc 显示minion设备上支持的命令   2.salt-call 可以显示比salt更多的信息,可以用来调试,检查,如果需要更详细的信息使用 salt-call -l ...

  5. C#制作高仿360安全卫士窗体<二>

    继上次C#制作高仿360安全卫士窗体<一>发布之后响应还不错,我的博客放肆雷特也来了不少的新朋友,在这里先谢谢大家的支持!我自己也反复看了一下觉得对不起大家,写的非常乱而且很少文字介绍.在 ...

  6. android下的数据存储

    android下数据存储的几种方式:(简单讨论) 1.文件 举例:登陆时“记住密码” 因为是基于Linux系统,直接建文件,文件会出现在项目工程:而手机登陆时,应该把文件放在手机里,通常数据放在dat ...

  7. 安装Netsharp演示插件

    阅读本文请先阅读Netsharp下载及环境搭建 Netsharp提供了DEMO程序,DEMO完成的功能是Netsharp文章系列中的Netsharp快速入门系列中介绍的功能,DEMO是以Netshar ...

  8. js判断手机还是pc并跳转相关页面

    <script type="text/javascript"> function GetRequest() { var url = location.search; / ...

  9. MVC 强类型视图

    MVC里面的强类型视图的确是一个很强大的东西,结合EF(Entity Framework)的话更加强大,可以直接把你的数据库直接生成强视图的增删查改的视图,在视图中所有Model的属性均动态的,我们不 ...

  10. IO端口和IO内存

    为什么会有IO端口和IO内存 这主要原因是因为处理器的架构不同,这里我们使用arm来代表典型的使用IO内存架构,intel 80x86代表典型的使用IO端口架构.简单来说arm把所有寄存器(包括外部设 ...