伪类和伪元素的理解

官方解释：

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(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. Unity3D 使用XML进行简单的配置文件改动

    1.首先是看看效果图: 開始执行项目例如以下图所看到的 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2NsdW9qaWpp/font/5a6L5L2T/ ...

  2. 【LeetCode】Permutations II 解题报告

    [题目] Given a collection of numbers that might contain duplicates, return all possible unique permuta ...

  3. java中==和equals和hashcode的区别详解

    一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...

  4. 02、Universal app 中按钮图标使用

    前言,windows10 昨天凌晨发布了,windows store 开发模型比以前的 silverlight 模型由很多优势, 我也小兴奋了一把. 正文: 在 windows phone 8.0 以 ...

  5. Makefile学习之路5——通过函数增强功能

    通过函数能显著增强Makefile的功能.对于simple项目的Makefile,尽管使用了模式规则,但还是有一件比较麻烦的事情,就是要在Makefile中指明每一个项目源文件.下面介绍几个后期会使用 ...

  6. vs2015开发so动态库linux

    #include <stdio.h> #include <dlfcn.h> typedef int(*fn_max)(int a, int b); int main() { p ...

  7. JSON特殊字符的处理

    本文转自:http://blog.csdn.net/btt2013/article/details/66970735 JSon 数据中的String 传递数据时,需要处理好特殊字符. JSon数据中有 ...

  8. scala Wordcount

    package my.bigdata.scala08 import scala.collection.mutableimport scala.collection.mutable.ArrayBuffe ...

  9. Odoo 8.0 new API 之one装饰

    one装饰器的作用是对每一条记录都执行对应的方法,相当于traditional-style中的function 应用举例: 定义的columns now = fields.Datetime(compu ...

  10. svn:ignore 的用处

    用svn管理代码,一直以来都受到一件不爽事情的困扰: 1)有些文件或文件夹不想在commit的时候看到,虽然他们是non-versioned,比如*.bak.*.class,*.scc(vss文件), ...