偽類 偽元素區(qū)別
? 如果你耐著性子看完了 你就贏了
Css2中定義模糊:給某些選擇器添加特殊的效果
Css3中進(jìn)行了區(qū)分:
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選擇器無法實(shí)現(xiàn)篩選的場(chǎng)景梯醒;
A pseudo-class always consist of a colon followed by the name of pseudo-class
and optionally by a value between parenthness
在偽類名稱之前會(huì)有一個(gè)冒號(hào):,并且還有可能含有圓括號(hào)卢肃;
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.
偽類對(duì)大小寫不敏感介返,有些互相排斥,有些能夠一起使用;
常用偽類
:active , //被激活的元素
:focus //鍵盤輸入焦點(diǎn)的元素
:hover
:link, //未被訪問的元素添加樣式
:visit //已訪問的鏈接
:first-child //元素第一個(gè)子元素
:lang //指定lang屬性的元素
偽元素
css3中新增偽元素使用 ::
對(duì)于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.
一個(gè)選擇器只能有一個(gè)偽元素蒋伦,并且位于選擇器語句的最后
- 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) ";
}
結(jié)果:
瀏覽器運(yùn)行結(jié)果
其余的特殊標(biāo)記例如:.. ' << ' 為瀏覽器自帶 ::before樣式