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. 防盗链Nginx设置图片防盗链,设置无效的请仔细看红字

    *******************************************************************切记,替换的图片地址要使用没有防盗链的网站图片,否则由于替换的图片 ...

  2. cocos lua 加密与解密 混淆 (版本号cocos3.4)

    cocos luacompile cocos luacompile Overview Usage Available Arguments Samples Overview Compile the .l ...

  3. mkdir命令(转)

    原文:http://www.cnblogs.com/peida/archive/2012/10/25/2738271.html linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户 ...

  4. 强制MySQL查询走索引和强制查询不缓存

    有些情况下,表中创建了索引但是EXPLAIN的查看执行计划的时候发现并没有走索引.是因为优化器认为该语句不使用索引效率更好. 当然也可以强制走索引.类似: SELECT uid,uname FROM ...

  5. Linux下Tar压缩使用

    具体的可以在linux环境下 用tar --help查看详细说明格式:tar [option] file -c create create a new archive -x extract extra ...

  6. linux下sar tool command note

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

  7. jquery toastmessage (Jquery类似安卓消息提示框)

    Do you wanna have some toasts ? jquery-toastmessage-plugin is a JQuery plugin which provides android ...

  8. Android网络开发之HttpURLConnection

    http是一个可靠的传输,建立在TCP/IP连接之上,缺省端口是80,其他端口号也可以用.Android可以用HttpURLConnection或HttpClient接口来开发http程序. http ...

  9. 架构-LAMP特级学习(网站大存储量解决方案)

    数据库采用主从.分区技术 数据库优化

  10. Foundations of Machine Learning: Boosting

    Foundations of Machine Learning: Boosting Boosting是属于自适应基函数(Adaptive basis-function Model(ABM))中的一种模 ...