伪类和伪元素的区别

（理解）伪类和伪元素的区别

学习这么长时间对于一些基本点还是不太理解，所以在这里进行了区分

第一种理解

    伪类用于向某些选择器添加特殊的效果。
    伪元素用于将特殊的效果添加到某些选择器。

第二种理解

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang

伪元素有：:first-line，:first-letter，:before，:after

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 [css3]为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

`:Pseudo-classes         //伪类

::Pseudo-elements       //伪元素

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

---

伪元素选择器

::first-line 匹配文本块的首行
::first-letter 选择文本块的首字母 :
:before 与 ::after ——使用 contnet 属性生成额外的内容并插入在标记中：

---

伪类选择器

E F:nth-child(n)：该选择器定位元素E的第n个子元素的元素F：
div.class p:nth-child(3) {color:#f00;} //class=”class”的div容器里的第3个元素p，如果第3个子元素不是p，此样式将失效

E F:nth-last-child(n)：该选择器定位元素E的倒数第n个子元素的元素F；
E:nth-of-type(n)：该选择器定位元素E的第n个指定类型子元素；
E:nth-lash-of-type(n)：该选择器定位元素E的导数第n个指定类型子元素：
.class p:nth-child(2) 与 .class p:nth-of-type(2) 的区别在于，如果.class里的第2个子元素不是P元素时，.class p:nth-child(2) 的样式将无效，而.class p:nth-of-type(2) 将定位在 .class 里的第2个p元素

nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)，这其中的 n 可以使用数字静态式，比如 .nth-child(2n+1) 将匹配第1、3、5…个元素

E:first-child：父元素的第一个子元素E，与:nth-child(1)相同；
E:last-child：父元素的倒数第一个子元素E；
E:first-of-type：与:nth-of-type(1)相同；
E:last-of-type：与:nth-last-of-type(1)相同；
E:only-child：父元素中唯一的子元素E；
E:only-of-type：父元素中唯一具有该类型的元素E；
E:empty：没有子元素的元素，没有子元素包括文本节点；
E:lang(en)：具有使用双字母缩写(en)表示的语言的元素；
E:not(exception)：该选择器将选择与括号内的选择器不匹配的元素：
:root —— root 选择页面的根元素
p:not(.item3)——not 排除某个或者某类元素——not(被排除的元素)
div:empty——指定的前面选择器所选的元素内容为空则生效。

–input的伪类选择器–
input:focus——当输入框获取焦点的时候应用此样式
input:enabled——起用状态下的样式
input:disabled——禁用状态下的样式
input:read-only——在输入框为只读状态下的样式
input:read-write——输入框为可读可写状态下的样式
input:checked——checked 表示选中状态下checkbox 的样式
input:indeterminate + label——checkbox 半选择状态下的样式
indeterminate——需要配合JS来使用（以下是JS代码）

var checkBox = document.querySelector("#box6>input");
//半选择状态 只能用js来设置
checkBox.indeterminate = true;