前端學習 Css 偽元素

:first-letter 表示第乙個字元

:first-line 表示文字的第一行

:before 選中元素的最前邊，一般該偽類都會結合content一起使用，通過content可以向指定位置新增內容。

:after 選中元素的最後邊，一般該偽類都會結合content一起使用，通過content可以向指定位置新增內容。

first-letter demo:

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
style 
type
="text/css"
>
/*:first-letter 表示第乙個字元
*/p:first-letter
style
>
head
>
<
body
>
<
p>
不知道喜歡你什麼，實在不知道，如果確定知道喜歡你什麼，是不夠喜歡你。因為不確定具體喜歡你什麼，所以喜歡你所有一切及其他。
p>
body
>
html
>

first-line demo:

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
style 
type
="text/css"
>
/*:first-line 表示文字的第一行
*/p:first-line
style
>
head
>
<
body
>
<
p>
我們是世人最好的朋友，我們是世人最差的情人，我們彼此相愛，就是為民除害。
p>
body
>
html
>

/*:first-line 表示文字的第一行

*/p:before

p:after

style

>

head

>

<

body

>

<

p>

我們是世人最好的朋友，我們是世人最差的情人，我們彼此相愛，就是為民除害。

p>

body

>

html

>

效果：

前端學習 Css 子元素的偽類

first child 尋找父元素的第乙個子元素，在所有的子元素中排序 last child 尋找父元素的最後乙個子元素，在所有的子元素中排序 nth child 尋找父元素中的指定位置子元素，在所有的子元素中排序 first of type 尋找指定型別中的第乙個子元素 last of type ...

前端學習 Css 子元素的偽類

first child 尋找父元素的第乙個子元素，在所有的子元素中排序 last child 尋找父元素的最後乙個子元素，在所有的子元素中排序 nth child 尋找父元素中的指定位置子元素，在所有的子元素中排序 first of type 尋找指定型別中的第乙個子元素 last of type ...

css偽類，偽元素

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