CSS 伪类用于向某些选择器添加特殊的效果。

我们最常见的就是有超链接的时候,向下面这样

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

首先来看一下伪类的定义形式吧

伪类的语法:

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}
a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

我们经常是会用到的伪类如下:

CSS 伪元素用于向某些选择器设置特殊效果。

语法:

伪元素的语法:

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用:

selector.class:pseudo-element {property:value;}
p.article:first-letter
{
color: #FF0000;
} <p class="article">This is a paragraph in an article。</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

虽然简单,但是容易忘记。。。

CSS2中的伪类与伪元素的更多相关文章

  1. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  2. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

  3. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  4. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  5. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  6. css中伪类与伪元素的区别

    一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...

  7. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  8. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

  9. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  10. css中伪类和伪元素

    伪类和伪元素时对那些我们不能通过class.id等选择元素的补充 伪类的操作对象是文档树中已有的元素(可以给已有元素加了一个类替代),而伪元素则创建了一个文档数外的元素(可以添加一个新元素替代) CS ...

随机推荐

  1. 翻译记忆软件-塔多思TRADO经典教程_5

    TRADOS新手必读 共有篇贴子 TRADOS新手必读   译海撷英系列之软件漫谈之TRADOS新手必读 作者:苏任 我很喜欢到翻译中国网站上来四处看看,一开始主要是关心应用资料和软件,后来就对网友的 ...

  2. ZH奶酪:IBG项目工作内容

    IBG项目技术概览 (HTML/CSS/JavaScript/AngularJS/PHP/MySQL): (1)后台:PHP Yii2.0 Framework (2)前端:Ionic Framewor ...

  3. 谷歌浏览器保存网页为pdf和.mhtml文件

    注:需要安装chrome谷歌浏览器,尽可能安装最新版的浏览器: 一:保存为pdf 打开要加载的网页 空白处右键-----打印 配置要打印的pdf网页 点击  左边----> 保存按钮  即可: ...

  4. 建立与读取.ini文件

    一般读写ini文件被读写Registry所取代,但我们还是可以透过 win31的传统方式读写ini文件,以存程式目前的相关设定,而於下一次程式执行时再 读回来.目前建议使用GetSetting Sav ...

  5. Oracle 11g 分区拆分与合并

    时间范围分区拆分create table emp (id number(6) not null,hire_date date not null)partition by range(hire_date ...

  6. linux下sar tool command note

    linux下的sar工具简介 我习惯使用的命令是 : sar  -r  -f   /var/log/sa/sa24 sar 既能报告当前数据,也能报告历史数据 不带选项执行会以10分钟为间隔报告自午夜 ...

  7. 〖Android〗酷派手机固件.cpb文件的分解程序

    /* * ===================================================================================== * * Filen ...

  8. java 实现文本格式转换

    代码如下,不太规范,仅作学习用 import java.io.*; public class CharSetTest { public static void main(String[] args) ...

  9. linux 文件操作库函数

    fopen :打开文件 fread :读文件 fwrite : 写文件 fgetc : 读字符 fputc : 写字符 fscanf : 格式化读 fprintf : 格式化写 fseek : 文件偏 ...

  10. 【转载】spring mvc 使用session

    http://home.51.com/gaoyangboy/diary/item/10036382.html Spring2.5 访问 Session 属性的四种策略 Posted on 2008-1 ...