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

    刘书例题  树形dp #include <cstdio> #include <cstdlib> #include <cmath> #include <map& ...

  2. tomcat 解析（三）-启动框架

    TOMCAT源码分析(启动框架)前言:   本文是我阅读了TOMCAT源码后的一些心得. 主要是讲解TOMCAT的系统框架, 以及启动流程.若有错漏之处,敬请批评指教!建议:   毕竟TOMCAT的框 ...

  3. zoj 3745 Salary Increasing（坑爹的细节题！）

    题目 注意题目中的,引用绝望的乐园中的进一步解释如下: 这是一道浙大月赛的题,一如既往的坑爹,好好一道水题,被搞成一道坑题!!! //注意:r(i) < l(i+1) !细节啊细节! #incl ...

  4. hdu 1905 小数化分数2

    ;}

  5. windows cmd控制台打开和关闭SqlServer 以及 显示发生系统错误5 拒绝访问的解决方案

    打开:net start mssqlserver 关闭:net stop mssqlserver 在dos下输入 net start mssqlserver 显示发生系统错误5 拒绝访问 解决办法,以 ...

  6. Android中ContentProvider的简单使用

    1.新建继承ContentProvider的类 package com.wangzhu.demo; import android.content.ContentProvider; import and ...

  7. linux软中断与硬中断实现原理概述

    linux软中断与硬中断实现原理概述. 1.软中断通过open_softirq注册一个软中断处理函数,即在软中断向量表softirq_vec数组中添加新的软中断处理action函数. 2.调用rais ...

  8. Delphi 7事件的多处理机制

    Delphi 7事件的多处理机制Allen Tao2007-08-19 首先解释一下这个题目.在我使用Delphi 7的过程中发现,一个对象的事件只能被一个过程处理.如果多次给这个对象的事件赋给处理事 ...

  9. iOS iOS7越狱

    1.使用盘古越狱工具 (或者PP助手) 2.越狱成功后需要安装Apple File Conduit “2”,用于替代afc2add插件 3.安装AppSync插件 (绕过系统验证,随意安装.运行破解的 ...

  10. 让你了解x86的中断

    COPY FROM:http://zhan.renren.com/qdlinux?gid=3602888498000980107&from=post&checked=true 研究li ...