伪类和伪元素的理解

官方解释：

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

我自己的理解：

伪类，类，class是一个类，就类似class这样，表示一些元素的状态的，但是无须标识的分类。

伪元素，就是一个元素，类似p标签元素，等等，逻辑上存在，但是实际并不存在在文档树中。

另外一个简单的理解和区分就是：

伪类前面是一个冒号，为元素前面是两个冒号。E:first-child 伪类，E::first-line为元素。

特殊情况::before 和 ::after 伪元素

before 和after是在元素前面和后面添加一些元素，因此是伪元素，CSS3选择器中已经将其前面变为两个冒号了。请看：w3cselect

问题来了，那么为什么我们平时用before和after前面就一个冒号？

CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。老的规范中，伪类和伪元素都用一个冒号，新规范为了区分，伪元素统一用两个“：：”,所以，大家注意了，往后在写css3的时候，为元素要用两个冒号，伪类用一个冒号。

伪类和伪元素的应用

我之前的css常用效果，讲了一些。

像伪元素

::-webkit-scrollbar

::selection

::-webkit-input-placeholder

::after

等等。

伪元素中用的最多的要数::after和::before了

可以用这两个伪元素做很多效果！

html

<a href="#">haorooms</a>
css

a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: 32px;
    padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }
其中content中可以用attr也可以用url

例如：

a：:after { content:"(" attr(href) ")"; } 
h1::before { content: url(logo.png); }

伪类中用的最多的要数：nth-child()选择器了，关于nth-child()，我们看下文

nth-child()浏览器支持

IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

例如：

p:nth-child(2)
{
background:#ff0000;
}

<body>

<h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p>

</body>
上面这段代码请问那个段落颜色是红色的？

答案是“haorooms第一个段落。”颜色变成了红色！

解释：:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。p:nth-child(2),P标签的父元素是body，body的第二个子元素是“haorooms第一个段落。”所以haorooms第一个段落颜色变为了红色！！！

注意

很多朋友经常把:nth-child() 和:nth-of-type()混淆。

CSS3 E:nth-of-type() 选择器的意思是“选择E同类型的同级的  第n个元素“

”

看下面的例子：

p:nth-of-type(2)
{
background:#ff0000;
}

<body>

<h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p>

</body>
代码一样，我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2)，现在就是“haorooms第二个段落。”颜色变成了红色。

奇偶数匹配

现在开始说说我开通说的table的tr偶数行变色的问题了。

因为table的子元素一般是tr，不会有别的，所以可以用

tr:nth-child(odd) 与 tr:nth-child(even)

当然也可以用

tr:nth-of-type(odd) tr:nth-of-type(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

倍数写法

:nth-child(an) 【:nth-of-type(an)同理，不解释】

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*
延伸

:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，还可以 :nth-child(-an+b)也就是反向匹配。

最后，总结一下伪类与伪元素的特性及其区别：

  1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
  2. 伪元素本质上是创建了一个有内容的虚拟容器；
  3. CSS3中伪类和伪元素的语法不同；
  4. 可以同时使用多个伪类，而只能同时使用一个伪元素

原文出处：（略有修改）http://www.111cn.net/cssdiv/css/89321.htm

CSS3伪类和伪元素的特性和区别尤其是 ::after和::before的更多相关文章

  1. CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

  2. css3 -- 伪类与伪元素

    伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){}  E : first-*(odd){} B:nth-child 是根 ...

  3. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  4. css3怎么分清伪类和伪元素

    伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...

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

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

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

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

  7. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  8. css3的伪（伪类和伪元素）大合集

    本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...

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

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

随机推荐

  1. InnoDB存储引擎表的逻辑存储结构

    1.索引组织表:     在InnoDB存储引擎中,表都是依照主键顺序组织存放的.这样的存储方式的表称为索引组织表,在innodb存储引擎表中,每张表都有主键.假设创建的时候没有显式定义主键,则Inn ...

  2. 安装vim 出现 terminal libary 错误，解决方法

    通过源码安装vim时,提示缺少terminal libary 而在安装ncurses以后,此问题照样出现. 经过查找资料发现.运行例如以下命令就能够正常安装vim <pre name=" ...

  3. mplayer 全屏问题

    [root@ok home]# gedit ~/.mplayer/config # Write your default config options here! zoom=yes #加上这个参数!全 ...

  4. Makefile 10——打造更专业的编译环境-huge项目

    先手工创建几个文件目录: 接下来先创建code/foo/src目录下的Makefile: .PHONY: all clean MKDIR = mkdir RM = rm RMFLAGS = -rf C ...

  5. 存档格式选择--JSON

    游戏里存档可以直接用lua,但是lua需要有一定编程基础:另外可以用ini,不过ini又太简单了,复杂的 格式无法用ini描述:还可以用xml,它的表达能力非常丰富,甚至有限数据库都用xml来作存储结 ...

  6. UCOS2系统内核讲述_总体描述

    Ⅰ.写在前面 学习本文之前可以参考我前面基于STM32硬件平台移植UCOS2的几篇文章,我将其汇总在一起: UCOS2_STM32F1移植详细过程(汇总文章) 要想学习,或使用系统配套的资源(如:信号 ...

  7. curses库--libncurses5-dev--游标移动及屏幕的显示

    curses是一个在Linux/Unix下广泛应用的图形函数库.,作用是可以绘制在DOS下的用户界面和漂亮的图形. curses的名字起源于"cursor optimization" ...

  8. [Python基础]Python中remove，del和pop的区别

    以a=[1,2,3] 为例,似乎使用del, remove, pop一个元素2 之后 a都是为 [1,3], 如下:http://Novell.Me >>> a=[1,2,3] &g ...

  9. Btrace的使用方法

    本文基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版> 写在前面: Btrace有很多用法,比如说性能监视,连接泄露,内存泄漏,多线程竞争,而本文说的只是最基本的应用打印调用 ...

  10. 使ie9以下版本支持canvas,css3等主流html5技术的方法

    1.前言.   ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助.比如,下面是一个让网页支持canvas和css3的例子. 2.例 ...