CSS 偽元素 偽類

2021-09-19 19:56:52 字數 1537 閱讀 1943

link 未訪問的鏈結

visited 已訪問的鏈結

hover 滑鼠移到元素上

active 向被啟用的鏈結新增樣式

focus 獲得輸入焦點的元素

first-child 作為某元素的第乙個子元素的元素

lang 向帶有指定lang屬性的元素新增樣式

在 css 定義中,a:hover 必須被置於 a:link 和 a:visited 之後,才是有效的。

在 css 定義中,a:active 必須被置於 a:hover 之後,才是有效的。

type="text/css">

a:link

style>

head>

這是乙個href="#">段落a>

p>

body>

html>

效果如下:

用於有焦點的元素。比如輸入框和鏈結。但並不是所有元素都有焦點

type="text/css">

input

:focus

style>

head>

type="input">

body>

html>

如果乙個a元素在另乙個元素b當中,並且a是b的第乙個子元素,那麼可以控制a的樣式

必須宣告 才能在 ie 中生效。

type="text/css">

p:first-child

style>

head>

這是第乙個段落p>

這是第二個段落p>

div>

body>

html>

效果圖:

對文字的首行(首字母)應用樣式

p

:first-line

這樣的效果是:

可以在元素的內容前面(後面)插入新內容

type="text/css">

h1:before

style>

效果如下:

規定引號的型別,前兩個表示第一層引用的符號,後兩個表示第二層引用的符號。

使用時用表示引號出現的位置。

type="text/css">

q:lang(en)

style>

head>

this is a bigq> quote.q>

p>

body>

結果是:@this is a 『big』 quote.#

css偽類,偽元素

偽類作用於整個元素,比如 a link a hover div first child 儘管這些條件都不是基於dom的,但結果沒乙個都是作用於乙個完整的元素,比如整個鏈結,段落,div等等 偽元素作用於元素一部分,比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中,a hover 必須被置於 a link 和 a visited 之後,才是有效的。2 在 cs...

css偽類 偽元素

selector pseudo element first line 文字首行設定特殊的樣式 first letter 文字首字母設定特殊樣式 before 在元素的內容前面插入新內容 after 在元素的內容之後插入新的內容 selector pseudo classa link 未訪問的連線 a...