这里想将的是两个伪元素，一个是:first-line——用来向文本的首行添加特殊样式，并且不论该行出现多少单词；只能与块状元素关联。

如下属性可以应用于:first-line伪元素

font属性

color属性

background属性

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>向段落的第一个字符添加特殊样式（让第一行颜色变红）</title>

<style>

    .wanly:first-line{color:red; font-family:Arial, Helvetica, sans-serif; width:100px;}

</style>

</head>

<body>

    <p class="wanly">第一行<br />第二行<br />第三行</p>

</body>

</html>

还有一个经常会出现在面试题当中的，用来改变默认选中文本颜色——::selection，但由于是css3的属性，故而可用的浏览器并不多，只能用于ie9以上，opera【欧朋】、chrome【谷歌】、safari【苹果】。若是想要火狐也支持，则可以写作::-moz-selection.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

        <title>CSS ::selection 伪元素示例</title>

        <style type="text/css" media="all">

            ::selection

            {

                color:lightblue;

                background:pink;

            }    

            ::-moz-selection

            {

                color:lightblue;

                background:pink;

            }

        </style>

    </head>

    <body>

        <div>CSS是现代标准网页设计的重要一环,主要负责网页的表现.它与一些标记语言,比如HTML,XHTML,XML等结合在一起,通过客户端设备(web浏览器,手持设备等)表现了网页的.它可以改变文字的样式,大小,颜色等等,还可以进行网页的排版.</div>

    </body>

</html>

css的伪元素的更多相关文章

  1. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  2. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  3. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  4. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  5. 笑谈CSS的伪元素

    今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...

  6. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  7. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  8. CSS 的伪元素是什么？

    CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. thinpad E43系列WIN8装WIN7系统

    昨晚WIN8系统下装WIN7 折腾了好久,故此总结一下写一篇U盘装WIN7 : 先简述一下思路:BOSS设置启动项------->U盘启动--------> 进入PE删除所有分区----- ...

  2. httpsClient抓取证书

    在执行webservice的过程中,出现如下异常: javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorExcep ...

  3. Apache Ignite——新一代数据库缓存系统

    [编者按]飞速增长的数据需要大量存储,对这些数据的管理也不是一件容易的事.但相比于存储和管理,如何处理数据才是开发人员真正的挑战.对于TB级别数据的存储和处理通常会让开发人员陷入速度.可扩展性和开销的 ...

  4. cf div2 235 D

    D. Roman and Numbers time limit per test 4 seconds memory limit per test 512 megabytes input standar ...

  5. StringUtils.isNumeric使用

    在做导入/导出功能时,客户要求导出数字类型的值时,将excel相应单元格属性设为number型,由此需判断字符串值是否为数字,代码如下: public static boolean isNumber( ...

  6. 【Linux高频命令专题(18)】tail

    概述 tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但 ...

  7. 【Linux高频命令专题(14)】nl

    概述 nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样,nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 ...

  8. kmalloc/kfree,vmalloc/vfree函数用法和区别

    http://blog.csdn.net/tigerjibo/article/details/6412881 kmalloc/kfree,vmalloc/vfree函数用法和区别 1.kmalloc ...

  9. SQLServer中服务器角色和数据库角色权限详解

    角色 当几个用户需要在某个特定的数据库中执行类似的动作时(这里没有相应的Windows用户组),就可以向该数据库中添加一个角色(role).数据库角色指定了可以访问相同数据库对象的一组数据库用户. 数 ...

  10. 使用XSSFWork创建的xlsx后缀Excel文件无法打开

    使用XSSFWork创建的xlsx后缀Excel文件无法打开 标签: POIExcelmicrosoftxlsx 2015-04-21 10:49 1170人阅读 评论(2) 收藏 举报 分类: Ja ...