这里想将的是两个伪元素，一个是: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 11825

    刘书上例题  关于集合的动态规划 #include <cstdio> #include <cstdlib> #include <cmath> #include &l ...

  2. Tutorial: Model

    What is a model? Across the internet the definition of MVC is so diluted that it's hard to tell what ...

  3. Mutex vs Semaphore

    What are the differences between Mutex vs Semaphore? When to use mutex and when to use semaphore? Co ...

  4. POJ 2184 Cow Exhibition (01背包的变形)

    本文转载,出处:http://www.cnblogs.com/Findxiaoxun/articles/3398075.html 很巧妙的01背包升级.看完题目以后很明显有背包的感觉,然后就往背包上靠 ...

  5. 毕向东JAVA视频视频讲解（第八课）

    继承的好处: 1,提高了代码的复用性. 2,让类与类之间产生了关系,给第三个特征多态提供了前提. java中支持单继承.不直接支持多继承,但对C++中的多继承机制进行改良. 单继承:一个子类只能有一个 ...

  6. POJ1248 Safecracker

    第一次写DFS的程序,虽然是个水题.1. 学了memset2. 可以存下来A-Z的各个次方的结果3. 可以排序优化4. 我用了t[0]==0来判断是否有解,也可设个flag5. 用了递归,也可用五层循 ...

  7. 2014--9=17 软工二班 MyEclipse blue==2

    关于Java中的getInetAddress方法 联网的话是一个分配的地址,不联网的话是本地localhost package cn.rwkj.test; import java.io.IOExcep ...

  8. java：构造函数

    class Dog { Dog(){ } } 构造函数没有返回值定义,构造函数名必须和类名相同,如果类里面没有构造函数,编译器会帮你加一个构造函数. 使用this调用构造函数 class Dog { ...

  9. NSMutableArray 初始化与添加删除程序

           Person *person1=[[Person alloc]initWithName:@"Kenshin"];        Person *person2=[[P ...

  10. 示例：Servlet显示当前系统时间（时间格式化）

    package com.mhb; import java.io.IOException; import java.io.PrintWriter; import java.text.SimpleDate ...