伪类 伪元素区别
☀ 如果你耐着性子看完了 你就赢了
Css2中定义模糊：给某些选择器添加特殊的效果
Css3中进行了区分：
the pseudo-class is introduced to permit selection based on information that lies
outside of the document tree or that cannot be expressed using other simple selectors
伪类作用于dom树之外的元素或者是通过简单的CSS选择器无法实现筛选的场景；
A pseudo-class always consist of a colon followed by the name of pseudo-class
and optionally by a value between parenthness
在伪类名称之前会有一个冒号：，并且还有可能含有圆括号；
Pseudo-classes are allowed in all sequences of simple selectors contained in a
selector. Pseudo-classes are allowed anywhere in sequences of simple selectors,
after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive
, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic,
in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
伪类对大小写不敏感，有些互相排斥，有些能够一起使用;
常用伪类
:active , //被激活的元素
:focus //键盘输入焦点的元素
:hover
:link, //未被访问的元素添加样式
:visit //已访问的链接
:first-child //元素第一个子元素
:lang //指定lang属性的元素
伪元素
css3中新增伪元素使用 ：：
对于css2中定义的伪元素 仍可以使用 ：
Only one pseudo-element may appear per selector, and
if present it must appear after the sequence of simple
selectors that represents the subjects of the selector.
一个选择器只能有一个伪元素，并且位于选择器语句的最后
- exmple
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: "(French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
结果：
浏览器运行结果
其余的特殊标记例如：.. ' << ' 为浏览器自带 ::before样式
