这里想将的是两个伪元素，一个是: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. Kafka的消息格式

    Commit Log Kafka储存消息的文件被它叫做log,按照Kafka文档的说法是: Each partition is an ordered, immutable sequence of me ...

  2. $('li','div') $('div li') $('div li')

    $('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有 ...

  3. linux源代码阅读笔记 linux文件系统（二）

    上一篇文章说到linux文件系统中分为超级块,inode块,block块.inode块给出文件的权限,修改时间,大小等信息. 但是实际上,文件的数据是存储在block块中的.而inode块中给出了存储 ...

  4. Javascript 中childNodes和children的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. DataRow.RowState 属性

    RowState 的值取决于两个因素:已对该行执行的操作的类型,以及是否已对 DataRow 调用了 AcceptChanges. private void DemonstrateRowState() ...

  6. Oracle的学习一：安装与卸载、sql *plus常用命令、Oracle用户管理

    1.为什么学习oracle? 性能优越: 小型数据库 中型数据库 大型数据库 acess.foxbase mysql.sql server.informix sybase.oracle.db2 复杂量 ...

  7. 李洪强iOS开发之OC[015]#pragma mark的使用

    // //  main.m //  14 - #pragma mark的使用 // //  Created by vic fan on 16/7/10. //  Copyright © 2016年 李 ...

  8. lintcode:1-10题

    难度系数排序,容易题1-10题: Cosine Similarity new  Fizz Buzz  O(1)检测2的幂次  x的平方根  不同的路径  不同的路径 II  两个字符串是变位词  两个 ...

  9. 被忽略却很有用的html标签

    <base>标签  作用:标签为页面中所有链接指定默认链接地址或链接目标.有时候我们需要让首页的链接全部在新窗口中打开,我们一般会这样写链接,而使用这个标签就能一下搞定了! 属性:Href ...

  10. 毕向东JAVA视频讲解（第六课）

    用java语言对现实生活中的事物进行描述. 通过类的形式来体现的. 怎么描述呢? 对于事物描述通常只关注两方面. 一个是属性,一个是行为. 只要明确该事物的属性和行为并定义在类中即可. 对象:其实就是 ...