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. [Backbone]4. Model & View, toggle between Model and View. -- 1

    如上图所示: Server有Data都交给Models处理, 然后由Models给Views Data,让View去告诉DOM如何显示, 然后DOM显示HTML; View events update ...

  2. [Node.js]22. Level 4: Dependency

    Add two dependencies to your package.json file, connect and underscore. You'll want to useconnect ve ...

  3. 12款程序员们最爱的Bootstrap模板

    如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完 ...

  4. android 时间与String的相互转化

    :大体思路 [html] view plaincopy 这种转换要用到java.text.SimpleDateFormat类 字符串转换成日期类型: 方法1: 也是最简单的方法 Date date=n ...

  5. Java从零开始学三十一(DATE和Calendar类)

    一.Date类 Date类是一个相对较为简单的操作类,在使用中直接使用java.util.Date类的构造方法并进行输出就可以得到一个完整的日期 二.Calendar类 Calendar类可以将取得的 ...

  6. mac系统下ionic环境配置

    本人是在mac环境下进行配置的: 下载nodejs:https://nodejs.org/download/ 并双击安装 Cordova and Ionic command-line tools 安装 ...

  7. Bootstrap系列 -- 15. 下拉选择框select【转发】

    <form role="form"> <div class="form-group"> <select class="f ...

  8. servlet 多线程

    servlet在服务器中只有一个实例,那么它响应请求的方式应该是多线程. 一,servlet容器如何同时处理多个请求. Servlet采用多线程来处理多个请求同时访问,Servelet容器维护了一个线 ...

  9. iOS-各种动画特效

    概述 广播跑马灯/弹幕/直播点赞/烟花/雪花等动画特效, 后续增加~ 详细 代码下载:http://www.demodashi.com/demo/10674.html 一.实现功能 1. 广播跑马灯 ...

  10. Linux-Linux下安装redis报错"undefined reference to__sync_add_and_fetch_4"解决办法

    如果出现这种错误可以在make的时候加上CFLAGS="-march=i686" 即 make CFLAGS="-march=i686" ----------- ...