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. ABAP后台JOB数量控制

    数据库视图:V_OP 可以查看JOB信息 FORM sub_check_job. * 通过JOB名称,控制活动JOB的数量 , jobname TYPE btcjob , strtdate TYPE ...

  2. spring mvc官网下最新jar搭建框架-静态资源访问处理-注解-自动扫描

    1.从官网下载spring相关jar http://spring.io/projects 点击SPRING FRAMEWORK

  3. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 用Keytool和OpenSSL生成和签发数字证书

    一)keytool生成私钥文件(.key)和签名请求文件(.csr),openssl签发数字证书      J2SDK在目录%JAVA_HOME%/bin提供了密钥库管理工具Keytool,用于管理密 ...

  5. 【Search Insert Position 】cpp

    题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...

  6. Zabbix实现微信告警

    zabbix实现微信告警可以分为以下两个步骤: 在百度告警告警平台实现微信告警 将Zabbix接入百度告警平台 微信告警 实现微信告警只需要如下四步: 个人主页关注微信 升级策略配置微信告警 服务管理 ...

  7. github/gitlab 管理多个ssh key

    github/gitlab 管理多个ssh key 以前只使用一个 ssh key 在github上提交代码,由于工作原因,需要再添加一个ssh key在公司的 gitlab上提交代码,下面记录下配置 ...

  8. 读书笔记：<世界是数字的>

    世界是数字的?第一次听到这个名词不由的感到惊讶,我有听过地球是海洋的,那世界不应该是人类共同拥有的吗或者也可以说世界是大自然的?为什么世界偏偏是数字的呢?我带着满心的疑问去看了那本<世界是数字的 ...

  9. Codeforces Round #109 (Div. 2) E. Double Profiles hash

    题目链接: http://codeforces.com/problemset/problem/155/E E. Double Profiles time limit per test 3 second ...

  10. Oracle Goldengate和Oracle Data Integrator的初步认识

    免责声明:     本文中使用的部分图片来自于网络,如有侵权,请联系博主进行删除 1. Oracle Glodengate是什么? GoldenGate是oracle的一种基于数据库日志的数据同步软件 ...