伪类和伪元素的区别

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

---

伪类和伪元素

以前老是分不清楚伪类和伪元素谁是谁，只知道它们都是选择器（selectors），一直处于懵比状态。今天就给大家详细地说一说它们的基本概念、之间的联系和区别。

伪类 - Pseudo-Classes Selectors

CSS伪类是用来添加一些选择器的特殊效果。【官方说法】

语法
选择器:伪类名称{属性:值;}

伪类列表

    :link      :hover          :active     :visited 
    :before    :after          :target     :first-letter     
    :focus     :first          :left       :right
    :root      :lang(language) :checked    :disabled
    :empty     :enabled        :invalid    :valid

    :first-child       :last-child         :first-line 
    :last-of-type      :first-of-type      :not(selector)
    :nth-child(n)      :nth-last-child(n)  :nth-last-of-type(n)
    :nth-of-type(n)    :only-of-type       :only-child
    :read-only         :read-write         :requried
    :out-of-range      :in-range           :optional 

CSS3伪类的功能有两种：

1. 获取DOM树中不存在的信息。（常见的鼠标悬停功能，无需通过js实现）
   比如<a>标签的:link、:visited、hover、active等，这些信息在DOM树结构中是不存在的，只能通过CSS选择器来获取，而通过js来实现这些效果又显得比较繁琐；
2. 来实现一些常规的CSS选择器无法达到的效果。
   （选中多行元素并改变它们的样式以达到自己想要的效果，简易化了一些js的DOM操作）
   比如:target伪类，它的作用是跳转到文档（页面）的URL地址中#所指向的目标元素。

语法：E:target{ css rules }
比如a元素的href属性,在href中指定一个要跳转的目标，href值必须和其他元素的id值相对应。
比如打开网页的链接地址（URL）后面跟一个锚点（#），它会指向文档内具体的某个元素。这个被链接的元素就是目标元素（E）。

代码演示：

#demo:target{color:#red;}

<div id="demo">
    <p>E:target伪类使用方法</p>
</div>

如果上述代码存在于页面fly.html中，那么当访问fly.html#demo时，这个div元素将会被:target命中。

---

• 例如我们可以通过下面代码来实现简单的页面内的区域跳转：

<ul class="jump">
    <li><a href="#t1">跳转1</a></li>
    <li><a href="#t2">跳转2</a></li>
    <li><a href="#t3">跳转3</a></li>
</ul>
<div id="t1" class="jump_place"></div>
<div id="t2" class="jump_place"></div>
<div id="t3" class="jump_place"></div>

CSS代码如下：

.jump_place {
  width: 100%;
  height: 800px;
  background: red;
  margin-bottom: 100px;
}
#t1:target, #t2:target, #t3:target {
    background:blue;
}

总之，:target通过css实现了常规css无法实现的逻辑和效果。

• 再举个栗子，:nth-child()伪类。

/*将所有偶数行背景色设置为红色*/
ul li:nth-child(2n){
   background-color: red;
}
/*将所有奇数行背景色设置为黄色*/
ul li:nth-child(2n+1){
   background-color: yellow;
}

:nth-child()伪类的效果是把用常规css选择器选出来的元素,按照新定好的样式规则（比如选中奇数行还是偶数行）再次进行筛选。

---

伪元素（又称伪对象）- Pseudo-Element Selectors

CSS伪类是用来添加一些选择器的特殊效果。【官方说法】

乍一看，和伪类的功能一模一样，官方的说辞也太水了，这样根本就看不出来有什么区别。没办法，官方在CSS2中的定义就是这样，因为它们实现的功能也就是这样了。但是，在CSS3中对伪元素做了重新的定义。

• 简单来说，伪元素创建了一个虚拟的容器，这个容器是空心的，里面不包含任何DOM元素，但是却可以自定义地在里面放置一些内容（content）。另外，开发者还可以根据需求给伪元素自定义样式。想想就很不错呢？
• 伪元素由两个冒号::和伪元素的名称构成（在CSS2中只有一个:，CSS3进行了升级改造）。
• 使用两个冒号::是为了更好地区分伪类和伪元素。（在CSS2中并没有区别，说真的，平时真的不知道谁是谁，概念经常搞混）
• 一个选择器只能使用一个伪元素，并且伪元素必须放在选择器语句的最后。（伪元素使用有限制，禁止滥用，哈哈~）
• 考虑到版本之间的兼容性，CSS2中已存在的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。（好的习惯是慢慢养成的，严格要求自己书写代码，形成良好的代码规范是很必要的）

伪元素（伪对象）列表

    :first-letter / ::first-letter      :first-line /::first-line
    :before /::before                   :after /::after 
    ::placeholder【css3新增】            ::selection【css3新增】

我们来举个栗子说明一下：

<p>This is a somewhat long HTML.<br>
paragraph that will be broken into several lines.<br>
The first line will be identified by a fictional tag sequence. <br>
The other lines will be treated as ordinary lines in the paragraph.</p>   

CSS代码如下所示：

/*改变p元素第一行段落的字体颜色，同时增大字体*/
p::first-line {color:red;font-size:20px;}   
/*在p元素的末尾增加自定义的内容和样式*/
p::after{
    content: "(123)";
    color:blue;
    font-size: 40px;
}

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

• 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多的信息；
• 伪元素本质上是创建了一个可以自定义内容和样式的虚拟容器；
• CSS3中伪类和伪元素的语法存在差异；
• 可以同时使用多个伪类，但只能同时使用一个伪元素；