伪类和伪元素的区别 类，用户定义的类名，这个类是具体的，看得见的，如div.div0，选择具有类div0的div元素。伪类，用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:hover，表单元素的:disabled。元素，如div、p、h1等，是实实在在存在的元素。伪元素，是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。如::before、::after。 伪类选择器
伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类通常表示的是一种“状态”。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
anchor伪类
如果设置a标签的四种状态，顺序必须是LVHA，即:link、:visited、:hover、:active。
一般情况下只需要设置a标签的默认效果和鼠标划过的效果，a{}、a:hover{}。
选择器示例示例说明:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态目标伪类选择器
:target 超链接后目标样式，当使用超链接后，链接的目标可以用目标选择器设置，目标只有被跳转后才会显示对应的样式。
a标签的href属性的值可以指向链接地址、标签的id，或者a标签的name。
<style>:target { font-size:20pt; border:1px solid gray;}div:target { background-color:#ccc;}</style><p><a rel="external nofollow" href="#news1">按钮1</a></p><p><a rel="external nofollow" href="#news2">按钮2</a></p><a name="news1">内容 1</a><div id="news2">内容 2</div>
当点击按钮2时，效果如下：
表单元素伪类选择器 选择器示例示例说明:focusinput:focus选择元素输入后具有焦点:enabledinput:enabled匹配每个已启用的元素:disabledinput:disabled匹配每个被禁用的元素:checkedinput:checked匹配每个已被选中的 input 元素:requiredinput:required选择有"required"属性指定的元素属性:optionalinput:optional选择没有"required"的元素属性:read-onlyinput:read-only选择只读属性的元素属性:read-writeinput:read-write选择没有只读属性的元素属性:validinput:valid选择所有有效值的属性:invalidinput:invalid在表单元素中的值是非法时设置指定样式:in-rangeinput:in-range用于标签的值在指定区间值时显示的样式:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:in-range只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性；
:invalid只作用于能指定区间值的元素，例如 |input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等
<style>input:in-range{border:2px solid yellow;}input:out-of-range{border:2px solid blue;}input:invalid{background-color: red;}input:valid{background-color: yellow;}</style><input type="number" min="5" max="10" value="7" /><input type="email"/> 结构伪类选择器 选择器示例示例说明:first-childp:first-child匹配属于任意元素的第一个子元素的p元素:first-of-typep:first-of-type选择父元素中的第一个 p 元素:last-childp:last-child选择所有p元素的最后一个子元素:last-of-typep:last-of-type选择父元素中最后一个p元素:emptyp:empty匹配没有子元素（包括文本节点）的p元素:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素:only-childp:only-child选择所有仅有一个子元素，并且子元素是p元素:only-of-typep:only-of-type选择所有仅有一个子元素中为p的元素 <style> p:first-child{color:red;}/*第一个元素是h1，所以没有选中*/ p:first-of-type{color:blue;} p:nth-child(4){color:green;}/*第4个元素是span,所以没有选中*/ p:nth-of-type(4){color:pink;} p:only-child{color:yellow;}/*选中了第7个p，但是样式被覆盖了*/ p:only-of-type{color:orange;}/*选中了第7个和第8个p*/</style><h1>标题1</h1><p>第一个p</p><p>第二个p</p><span>文字内容</span><p>第三个p</p><p>第四个p</p><p><i>文字内容</i>第五个p</p><p>第六个p</p><h5>标题5</h5><div><p>第七个p</p> </div><div><p>第八个p</p> <span>文字内容</span></div><div><p>第九个p</p> <p>第十个p</p></div>
页面效果如下：
否定伪类选择器 选择器示例示例说明:not(selector):not§选择所有p以外的元素伪元素
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容。伪元素的由两个冒号::开头，然后是伪元素的名称。
简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。
css3中伪元素选择器和css2中伪类选择器中， before和after是完全相同。
伪元素只有以下几种：
选择器示例示例说明::first-letterp::first-letter选择器的首字母::first-linep::first-line选择器的首行::selectionp::selection被用户选取的部分::beforep::before在选择器前增加内容::afterp::after在选择器后增加内容
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。可以使用伪类+伪元素。
div::after{content: url("./img/1.jpg");}div:hover::after{content: url("./img/2.jpg");} CSS样式权重
css优先级规则：
1、css选择规则的权重值不同时，权重值高的优先；
2、css选择规则的权重值相同时，后定义的规则优先；
3、css属性后面加 !importand 时，无条件绝对优先；
权重值的计算：
选择器权重值行内样式1000id选择器100class选择器/属性选择器/伪类10元素名/伪元素1
第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；
第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；
此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；