第01步：编写css代码：wei.css

@charset "utf-8";

/*

伪元素选择器

    :状态

效果顺序：L V H A

*/

a:link.lin_01{/*超链接，未访问状态*/

    background-color:#60F;

    color:#FFF;

    text-decoration:none;/*去掉下划线*/

    font-size:24px;

    }

a:hover.lin_02{/*悬停效果*/

    background-color:#F00;

    color:#00F;

    font-size:36px;

    }

a:active.lin_03{/*点击，未放开效果*/

    background-color:#;

    color:#FFF;

    font-size:9px;

    }

a:visited.lin_04{/*访问后效果*/

    background-color:#9F0;

    color:#;

    font-size:9px;

    text-decoration:line-through;

    }

div:hover.dh_01{/*div效果*/

    background-color:#9F0;

    color:#6FC;

    }

p:first-letter{/*首字样式*/

    background-color:#60F;

    color:#FF0;

    font-size:36px;

    }

p:first-line{/*段落第一行*/

    font-size:24px;

    }

input:focus{/*input输入框效果*/

    background-color:#33C;

    color:#F00;

    }

第02步：编写html代码：

<!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=utf-8" />

<title>伪元素选择器</title>

<link href="wei.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <a href="http://www.baidu.com" target="_blank">无样式效果链接</a>

    <hr />

    效果01：

    <a href="http://www.baidu.com" class="lin_01" target="_blank">样式效果01</a>

    <hr />

    效果02：

    <a href="http://www.baidu.com" class="lin_02" target="_blank">样式效果02</a>

    <hr />

    效果03：

    <a href="http://www.baidu.com" class="lin_03" target="_blank">样式效果03</a>

    <hr />

    效果04：

    <a href="http://www.baidu.com" class="lin_04" target="_blank">样式效04</a>

    <hr />

    效果05：<br />

    <div class="dh_01">样式05</div>

    <div class="dh_01">样式05</div>

    <div class="dh_01">样式05</div>

    <hr />

    效果06：<br />

    <p>小船袜儿</p>

    <p>小船袜儿</p>

    <hr />

    效果07：<br />

    <input />

    <input />

</body>

</html>

CSS_03_04_CSS伪元素选择器的更多相关文章

  1. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  2. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  4. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  5. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  6. 前端-CSS-4-伪类选择器&伪元素选择器

    1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...

  7. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  8. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  9. css 伪元素选择器

    /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...

随机推荐

  1. Sandbox 文件存放规则

    文档1, document2,  document3 一.文件路径介绍 <Application_Home>/AppName.app : 1) This is the bundle dir ...

  2. javax.management.NotCompliantMBeanException

    public interface QueueMBean { } 假如接口名叫 XMBean ,那么实现名就必须一定是X,而且是大小写敏感的. public class Queue implements ...

  3. 自动换行的矢量文字(android demo)

    由于矢量字体的宽度不同,自测android字体,发现当中文字体大小为100像素时,字母s等 宽度大概在52,字母l等 宽度大概在26,这样自动换行就不可以按字符的个数计算截取每行显示的字串. 直接上代 ...

  4. 编写SqlHelper使用，在将ExecuteReader方法封装进而读取数据库中的数据时会产生Additional information: 阅读器关闭时尝试调用 Read 无效问题，解决方法与解释

    在自学杨中科老师的视频教学时,拓展编写SqlHelper使用,在将ExecuteReader方法封装进而读取数据库中的数据时 会产生Additional information: 阅读器关闭时尝试调用 ...

  5. TCP 协议中MSS的理解

    在介绍MSS之前我们必须要理解下面的几个重要的概念.MTU: Maxitum Transmission Unit 最大传输单元MSS: Maxitum Segment Size 最大分段大小PPPoE ...

  6. Tram---poj1847（简单最短路）

    题目链接:http://poj.org/problem?id=1847 题意:给了N个交叉口,每个交叉口有自己能转到的交叉口. 注意这里:First number in the i-th line, ...

  7. iOS 获取当前时间 年、月、日、周几

    NSDate * nowDate = [NSDate new]; NSCalendar *calendar = [NSCalendar currentCalendar]; NSUInteger uni ...

  8. JS-010-覆盖率测试工具 JSCoverage 初识

    在日常的 js 脚本语言开发过程中,在开发攻城狮进行日常的单元测试和测试攻城狮日常的测试过程中,js 代码的覆盖率是白盒测试的一个重要的考量标准.前些天,在无意中看到了一个 js 覆盖率测试统计工具 ...

  9. zabbix命令：zabbix_get获取item数据

    zabbix命令:zabbix_get获取item数据 http://www.ttlsa.com/zabbix/zabbix-zabbix_get-get-items/

  10. 使用sed，awk将love转换成LOVE，将CHINA转换成china

    将love转换成LOVE,将CHINA转换成china echo "love CHINA" | sed -e 's/love/LOVE/' -e 's/CHINA/china/' ...