这里想将的是两个伪元素，一个是: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. UVA 11806 Cheerleaders （组合+容斥原理）

    自己写的代码: #include <iostream> #include <stdio.h> #include <string.h> /* 题意:相当于在一个m*n ...

  2. POJ3080Blue Jeans

    http://poj.org/problem?id=3080 题意 : 给你几个DNA序列,让你找他们的共同的最长的子串,若是子串长度小于3,就输出no significant commonaliti ...

  3. 【转载】关于ActionContext.getContext().getParameters()获值问题

    ActionContext.getContext().getParameters():一个学员问题的解答 2012-11-12 15:12:05|  分类: 默认分类 |  标签:struts2   ...

  4. 无法将 grub-efl-amd64-signed 软件包安装/target/ 中

    64位win7下U盘安装64位ubuntu12.04,出现[无法将 grub-efl-amd64-signed 软件包安装/target/ 中]的错误 1. 已经确认为 12.04.2 的 Bug B ...

  5. 查看mininet交换机中的流表

    官网文档http://mininet.org/walkthrough/#xterm-display Xterms are also useful for running interactive com ...

  6. 是谁决定了走redis缓存？当然是mybatis啊

    1.是谁决定了走redis缓存?当然是mybatis啊 mybatis里默认实现数据的增删改查功能,这里要用到缓存啊 而且是mybatis这种orm框架采用缓存机制的,mybatis默认都有两层缓存了 ...

  7. lua的split函数

    function split(s, delim) then return end local t = {} while true do local pos = string.find (s, deli ...

  8. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  9. phantomjs使用说明

    phantomjs使用说明 12条评论   phantomjs实现了一个无界面的webkit浏览器.虽然没有界面,但dom渲染.js运行.网络访问.canvas/svg绘制等功能都很完备,在页面抓取. ...

  10. const和readonly的区别

    http://www.cnblogs.com/royenhome/archive/2010/05/22/1741592.html http://www.codeproject.com/Tips/803 ...