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. UIPickerView swift

    // // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...

  2. 文件读写 swift

    // // ViewController.swift // 文件读写 // // Created by mac on 15/7/12. // Copyright (c) 2015年 fangyuhao ...

  3. CommonsChunkPlugin的使用（关于angular2中的polyfills和vendor的疑问解决）

    seed: angular2-webpack-starter(在github上可以找到) polyfills:提供api以方便兼容不同的浏览器 vendor:项目插件扩展 在学习ng2中一直不明白为什 ...

  4. “我爱淘”冲刺阶段Scrum站立会议3

    完成任务: 将搜索框的界面已经实现以及部署到整个框架中. 计划任务: 实现搜索功能,通过数据库的链接,实现用户可以查到自己需要的书籍的信息. 遇到问题: 1.数据库的操作,怎么实现查询功能: 2.Ac ...

  5. 关于Liferay所有的能够进行自定义和扩展的东西的总结

    非常超级什么有用的东西,amazing. 虽然不是宝宝写的. Fantastic Extension Points - And Where to Find Them

  6. Asp.Net 操作word 第二篇[推荐]

    引言:前段时间有项目要用c#生成Word格式的计算报告,通过网络查找到很多内容,但是都很凌乱,于是自己决定将具体的步骤总结整理出来,以便于更好的交流和以后相似问题可以迅速的解决! 现通过具体的示例演示 ...

  7. navicat for mysql 注册码

    PremiumSoft Navicat for MySQL Enterprise Edition v8.0.27 姓名(Name):3ddown.com 组织(Organization):3ddown ...

  8. 设计模式之外观模式(Facade)

    外观模式原理:将复杂的子系统的结构封装起来,只提供客户一个简单的接口 代码如下: #include <iostream> #include <string> #include ...

  9. 【BZOJ】【1485】【HNOI2009】有趣的数列

    Catalan数/组合数取模 Aha!这题我突然灵光一现就想到Catalan数……就是按顺序安排1~2n这些数(以满足前两个条件)……分配到奇数位置上的必须比偶数位置上的多(要不就不满足第三个条件了) ...

  10. 导入ApiDemo报错，找不到R文件

    1.先检查当前ApiDemo对应的SDK版本是否一致(项目右键-Properties-Android) 2.查看是什么错误.我的就是layout中的progressbar_2.xml中所有组件的id前 ...