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. comparing-html5-mobile-ui-frameworks

    http://html5hub.com/comparing-html5-mobile-ui-frameworks/

  2. java数组元素的输出

    java数组元素的输出 利用Arrays.toString(数组名即可) String[] name = {"Tom", "John", "Nike& ...

  3. WEB相关文件的加载顺序

    一. 1.启动一个WEB项目,WEB容器会先去读取它的配置文件web.xml,读取<context-param>和<listener>两个节点. 2.接着,容器创建一个Serv ...

  4. Hibernate内存溢出分析一例

    公司业务系统在进行压力测试时,压测24小时后系统发生内存溢出.经过分析读dump文件,发现org.hibernate.stat.StatisticsImpl类的hashmap类型的变量存储了大量数据( ...

  5. 【CentOs】搭建svn服务器

    参考资料: svn攻略: http://blog.csdn.net/colinchan/article/details/1865154 错误解决:http://hi.baidu.com/anglem/ ...

  6. JAVA 显示图片的简单源码 分类： Java Game 2014-08-14 10:10 77人阅读 评论(0) 收藏

    此代码的原理就是用JLabel来加载图片,再将JLabel放入JFrame中, package com.mywork; import javax.swing.ImageIcon; import jav ...

  7. 2014ACM/ICPC亚洲区西安站 复旦命题

    http://codeforces.com/gym/100548 A 签到 问一个序列是不是yes,yes的序列满足每个数都是3的倍数. #include<cstdio> int main ...

  8. Linux查看日志命令

    tail -f /var/log/apport.log more /var/log/xorg.0.log cat /var/log/mysql.err less /var/log/messages g ...

  9. 2014 ACM/ICPC Asia Regional Xi'an Online Paint Pearls

    传说的SB DP: 题目 Problem Description Lee has a string of n pearls. In the beginning, all the pearls have ...

  10. Codeforces Round #242 (Div. 2) C题

    题目链接:http://codeforces.com/contest/424/problem/C, 想来一个小时,就是做不出,都做出来了,悲剧! 分析:我们知道交换异或的顺序不影响答案! 然后就是求t ...