伪元素&伪类深度解析

伪类 伪元素区别

☀ 如果你耐着性子看完了 你就赢了

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样式