伪类和伪元素

伪元素和伪类

现在在做前端工作，但是在css的使用方面显然还是皮毛，很多东西都不是很了解，导致每次想要实现某种效果的时候就是各种百度，百度了之后又是什么都没记住，下次遇到问题的时候还是百度，这样是永远学不到东西的，所以就打算将自己需要加强学习的东西都记录下来，作为记录方便以后查阅和深入理解，理解初期可能会有一些问题，以后会慢慢更正，如有问题，请多指教！

今天先来记录伪类和伪元素，之前就遇到过这类的问题，觉得伪类和伪元素是一种很强大的东西，可以做出很多意想不到的效果
，所以按照以下思路进行记录。

参考文章1

参考文章2

1. 什么是伪类和伪元素？
2. 伪类和伪元素的区别和联系？
3. :before和:after的实例

一、什么是伪类和伪元素

伪类和伪元素其实是两个概念，之前一直搞混，或者说就是把他们当作一个东西了，后来才发现两者是不一样的。

1、伪类
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target；伪类存在的意义是为了通过选择器找到那些不存在与DOM树种的信息以及不能被常规css选择器获取到的信息，任何常规选择器可以在任何位置使用伪类，伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

语法：

selector : pseudo-class {property: value}

伪类表：

Selector	Meaning	CSS
:active	选择正在被激活的元素	1
:hover	选择被鼠标悬浮着元素	1
:link	选择未被访问的元素	1
:visited	选择已被访问的元素	1
:focus	选择拥有键盘输入焦点的元素	2
:first-child	选择满足是其父元素的第一个子元素的元素	2
:only-child	选择满足是其父元素的唯一一个子元素的元素	3
:last-child	选择满足是其父元素的最后一个元素的元素	3
:nth-child(n)	选择满足是其父元素的第n个子元素的元素	3
:nth-last-child(n)	选择满足是其父元素的倒数第n个子元素的元素	3
:first-of-type	选择满足是其父元素的第一个某类型子元素的元素	3
:last-of-type	选择满足是其父元素的最后一个某类型子元素的元素	3
:only-of-type	选择满足是其父元素的唯一一个某类型子元素的元素	3
:nth-of-type(n)	选择满足是其父元素的第n个某类型子元素的元素	3
:nth-last-of-type(n)	选择满足是其父元素的倒数第n个某类型的元素	3
:target	选择当前的锚点元素	3
:lang	选择带有指定 lang 属性的元素	2
:enable	选择每个已启动的元素	3
:disable	选择每个已禁止的元素	3
:checked	选择每个被选中的元素	3
:empty	选择满足没有子元素的元素	3
:in-range	选择满足值在指定范围内的元素	3
:out-of-range	选择值不在指定范围内的元素	3
:invalid	选择满足值为无效值的元素	3
:valid	选择满足值为有效值的元素	3
:not(selector)	选择不满足selector的元素	3
:optional	选择为可选项的表单元素，即没有“required”属性	3
:read-only	选择有"readonly"的表单元素	3
:read-write	选择没有"readonly"的表单元素	3
:root	选择根元素	3

其中:first-child系列的选择在之前是理解有误的，p:first-child表示选择的元素既要是p标签，同时要是其父元素的第一个子元素，不要错误认为是表示p元素的第一个子元素。

2、伪元素

伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

语法：

selector : : pseudo-element {property: value}

但是伪元素用:并不会报错，但是用::较为规范。

伪元素表：

Selector	Meaning	CSS
::active	在指定元素的内容前面插入内容	2
::before	在指定元素的内容后面插入内容	2
::selection	选择指定元素中被用户选中的内容	3
::first-letter	选择指定元素的第一个单词	1
::first-line	选择指定元素的第一行	1

二、伪类和伪元素的本质区别

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素其实创造了一个虚拟的容器；而且最明显的就是两者的语法是不同的根据最新的css3伪类使用的是:，伪元素使用的是::，虽然因为兼容的问题伪元素使用:并不会报错，但是还是使用::较为规范；元素可以同时使用多个伪类，如：table tr:nth-child(2n+1):nth-child(5n) td，而只能同时使用一个伪元素。

三、伪类和伪元素的使用实例

以下是一些实例，会不断更新。

1、伪类实例

因为在我们生活中使用的比较多的就是 <a> 标签的 :active、:hover、:visited、:link，也相对比较简单就不做实例了。

：target
选中的是当前锚点的元素，可以更改当前锚点元素的属性和状态。

html代码：

<ul class="tabs">
    <li><a href="#tab1">标签一</a></li>
    <li><a href="#tab2">标签二</a></li>
    <li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content"></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"></div>

css代码：

.tab_content {
  height: 800px;
  background: red;
  margin-bottom: 100px;
}
#tab1:target, #tab2:target, #tab3:target {
    background:blue;
}

1、伪类实例

:before&:after

（1）插图效果

中间空出的部分可以添加图片，展示插图的效果。

html代码：

<!--第一个文字环绕效果-->
<div id="demo1">
    <p>We all stood there under the awning and We all stood there under the awning and just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.</p>
    <p>She had been shopping We all stood there under the awning and just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.with her Mom in Wal-Mart. She must have been 6 years old, this beautiful brown haired, freckle-faced image of innocence. It was pouring outside. The kind of rain that gushes over the top of rain gutters, so much in a hurry to hit the Earth, it has no time to flow down the spout.</p>
</div>

css代码：

#demo1 {
    width: 100%;
    height: 500px;
    background-color: skyblue;
}

#demo1 p {
    width: 300px;
    height:400px;
    background-color: #000;
    margin: 5px;
    color: aliceblue;
    overflow: hidden;
    float: left;
}

p:first-child::before {
    content: '';
    width: 150px;
    height: 200px;
    float: right;
}

p:last-child::before {
    content: '';
    width: 150px;
    height: 200px;
    float: left;
}

（2）各种图标